@capgo/capacitor-browser in-app

Panoramica

@capgo/capacitor-inappbrowser fornisce agli app Capacitor due percorsi del browser: open() per l'esperienza del browser del sistema e openWebView() for a managed native WebView that your app can size, hide, message, script, proxy, and layer with Ionic UI.

Usalo quando la pagina richiede più di un semplice browser esterno: flussi di autenticazione OAuth e di pagamento, porteali di supporto integrati, schermate di pagamento, chiamate video, porteali di documenti, app web interattive o qualsiasi flusso in cui il tuo app ha bisogno di controlli nativi intorno al contenuto web in tempo reale.

È cambiato il nome del pacchetto.

Casi d'uso comuni

• Mostra l'interfaccia di Ionic o Capacitor sopra una pagina di browser in tempo reale con toBack, sendToBack(), bringToFront(), transparentBackground, e dispatchInputEvent().
• Crea browser a schermo parziale, schede in basso e visualizzazioni web in miniatura con width, height, x, y, e updateDimensions().
• Iscrizione utente sul Capacitor app al di fuori di una finestra del browser personalizzata su Android e iOS.
• Esegui flussi di checkout, login, supporto o account-switching senza archiviazione persistente del sito web utilizzando persistWebViewData: false e clearAllBrowsingData().
• Conserva più istanze di browser caricate con hidden, hide()e show() mentando lo stato della pagina.
• Integra applicazioni web avanzate che richiedono proxy di richiesta, upload e download di file, controllo popup, supporto a Google Pay. _blank elaborazione dei link e messaggistica app-pagina.

Sezione intitolata “Capacità di base”

• open - Apre una URL in Chrome Custom Tabs su Android o SFSafariViewController su iOS.
• openWebView - Inoltra eventi di click, touch e scroll a una vista web che si trova dietro l'interfaccia UI nativa dell'applicazione.
• sendToBack / bringToFront - Sposta un browser gestito dietro o sopra il Capacitor host WebView.
• dispatchInputEvent - Inoltra gli eventi di click, tocco e scorrimento a un browser che si trova dietro all'interfaccia nativa dell'app.
• updateDimensions - Sposta una vista web gestita dietro o sopra la __CAPGO_KEEP_0__ vista web host.
• hide / show - Mantiene caricati i WebView gestiti mentre rimuove o ripristina la loro presentazione nativa.
• postMessage / executeScript - Collega l'app Capacitor con il JavaScript in esecuzione all'interno della pagina gestita.
• clearAllBrowsingData / persistWebViewData - Controlla cookie, cache, storage, IndexedDB e persistenza della sessione.
• handleDownloadsDocumenti di supporto per porte documentali, flussi di caricamento, pagine di pagamento e applicazioni web integrate.

- Pubblico API

Metodo	Descrizione
goBack	Ritorna indietro nella storia del WebView se possibile.
open	Apre l'URL in una nuova finestra a schermo intero, su Android utilizza le tab custom di Chrome, su iOS utilizza SFSafariViewController.
clearCookies	Cancella i cookie dell'URL Quando id Se omesso, si applica a tutti i WebView aperti.
clearAllCookies	Elimina tutti i cookie Quando id Se omesso, si applica a tutte le finestre web aperte.
clearCache	Elimina cache Quando id Se omesso, si applica a tutte le finestre web aperte.
clearAllBrowsingData	Cancella i cookie, il cache, il storage locale, il storage sessione, IndexedDB e altri dati di navigazione dallo store predefinito e dai WebViews gestiti.
getCookies	Ottieni i cookie per una specifica URL.
close	Chiudi la finestra web. Quando id Se omesso, chiude la finestra web attiva.
hide	Nascondi la finestra web senza chiuderla. Utilizza show() per riportarla in superficie. Quando id Se omesso, si applica alla finestra web attiva.
show	Mostra una finestra web precedentemente nascosta. Quando id Se omesso, si applica alla finestra web attiva.
sendToBack	Sposta il browser nativo dietro il Capacitor host WebView per far apparire l'interfaccia utente dell'app sopra di esso.
bringToFront	Rimette in primo piano un browser che era dietro il host WebView.
dispatchInputEvent	Inoltra l'input di click, touch o scroll a un browser gestito; le coordinate sono relative alla finestra del browser.
openWebView	Apri l'URL in una nuova vista web con barre degli strumenti e funzionalità avanzate, come l'accesso alla camera, all'accesso ai file, l'ascolto degli eventi, l'iniezione di JavaScript, la comunicazione bidirezionale, ecc.
executeScript	Inserisce il JavaScript code nella finestra InAppBrowser. Quando id è omesso, viene eseguito in tutte le viste web aperte.
postMessage	Invia un evento alla vista web (browser in-app). Ascolta nella pagina con window.addEventListener('messageFromNative', listenerFunc)Il detail payload deve essere JSON-serializzabile. Quando id è omesso, invia a tutte le viste web aperte.
takeScreenshot	Cattura lo stato corrente della vista web come screenshot in formato PNG. Quando id è omesso, si concentra sulla vista web attiva.
setUrl	Imposta l'URL della vista web. Quando id è omesso, si riferisce alla vista web attiva.
addListener	Ascolta il cambiamento dell'URL, solo per openWebView.
addListener	Ascolta buttonNearDoneClick; il payload contiene la vista web id.
addListener	Ascolta il click di chiusura solo per openWebView.
addListener	Si attiverà quando l'utente cliccherà sul pulsante di conferma quando è richiesta la dichiarazione, funziona con openWebView shareDisclaimer e closeModal.
addListener	Si attiverà quando la vista web invia un evento di ritorno all'applicazione. Utilizza window.mobileApp.postMessage(...) in pagina, e mantieni il payload JSON-serializzabile.
addListener	Si attiverà ogni volta che viene catturato uno screenshot dal plugin API, il pulsante di screenshot nativo o il ponte di JavaScript iniettato.
addListener	Si attiverà quando la pagina viene caricata.
addListener	Si verrà attivato all'errore di caricamento della pagina.
addListener	Will essere attivato dopo che il download nativo salva un file localmente. Abilita questo con handleDownloads: true quando si apre il webview.
addListener	Will essere attivato quando il download nativo fallisce. Abilita questo con handleDownloads: true quando si apre il webview.
addListener	Will essere attivato ogni volta che una pagina apre una finestra popup. Utilizza l'ID del popup restituito con executeScript, postMessage, show, hide, e close.
addListener	Ascolta le richieste delegate dal runtime nativo tramite proxy. Preferisci addProxyHandler() al posto di chiamare questo direttamente.
addListener	Ascolta l'output del console JavaScript emesso dalla pagina gestita. Abilita questo con captureConsoleLogs: true quando si apre il webview.
handleProxyRequest	Metodo interno utilizzato da addProxyHandler() per inviare una decisione di proxy al nativo. Inoltra l'originale phase quando rispondi a una richiesta manuale proxyRequest ascoltatore.
removeAllListeners	Elimina tutti gli ascoltatori per questo plugin.
reload	Carica nuovamente la pagina web corrente.
updateDimensions	Aggiorna le dimensioni della finestra web. Consente di modificare la dimensione e la posizione della finestra web in esecuzione. Quando id è omesso, si riferisce al webview attivo.
setEnabledSafeTopMargin	Imposta il margine superiore sicuro abilitato della vista web in esecuzione. Quando id Non viene utilizzato, mira al webview attivo. Su Web, questo metodo è un no-op e risolve senza modificare la disposizione.
setEnabledSafeBottomMargin	Imposta il margine inferiore sicuro abilitato della vista web in tempo di esecuzione. Quando id Non viene utilizzato, mira al webview attivo. Su Web, questo metodo è un no-op e risolve senza modificare la disposizione.
openSecureWindow	Apri una finestra OAuth2 sicura. Su web, restituisce l'URL di reindirizzamento attraverso un BroadcastChannel; su mobile, registra un URI di reindirizzamento personalizzato nella configurazione dell'app. Vedi la guida di avvio rapido per gli esempi completi di HTML, Info.plist e AndroidManifest.

Valori di Riferimento

Usa questi valori con le opzioni del toolbar quando si apre un browser in-app o una WebView.

Tipi di Toolbar

Valore	L'utente troverà
activity	Simple toolbar with close and share controls.
compact	Simple toolbar with a close control.
navigation	Barra dei comandi completa con controlli di indietro e avanti.
blank	Nessun toolbar.

Fonte di Verità

Questa documentazione è sincronizzata da src/definitions.ts in capacitor-inappbrowser.

Continua da @capgo/capacitor-inappbrowser

Se stai utilizzando @capgo/capacitor-browser in-app per pianificare il lavoro di plugin nativo, connettilo con Utilizza @capgo/capacitor-inappbrowser per la capacità nativa in Utilizza @capgo/capacitor-inappbrowser Capgo Directory dei Plugin per il workflow del prodotto in Capgo Directory dei Plugin Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiungere o aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin, e Ilternative Plugin Enterprise Ionic per il workflow del prodotto in Alternative Plugin Enterprise Ionic.