@capgo/capacitor-inappbrowser

Panoramica

@capgo/capacitor-inappbrowser offre a Capacitor app due percorsi browser: open() per l'esperienza del browser di sistema e openWebView() per una WebView nativa gestita che la tua app può ridimensionare, nascondere, inviare messaggi, scriptare, fare da proxy e sovrapporre all'interfaccia Ionic.

Usalo quando la pagina richiede più di un semplice browser esterno: flussi OAuth e checkout, portali di supporto integrati, schermate di pagamento, videochiamate, portali documentali, web app interattive o qualsiasi flusso in cui la tua app ha bisogno di controlli nativi attorno a contenuti web live.

Nome del pacchetto modificato.

Casi d'uso comuni

• Mostra l'interfaccia Ionic o Capacitor sopra una pagina browser live con toBack, sendToBack(), bringToFront(), transparentBackground, e dispatchInputEvent().
• Crea browser a schermo parziale, bottom sheet e webview picture-in-picture con width, height, x, y, e updateDimensions().
• Permetti agli utenti di toccare l'app Capacitor fuori dal frame del browser di dimensioni personalizzate su Android e iOS.
• Esegui flussi di checkout, login, supporto o cambio account senza storage persistente del sito usando persistWebViewData: false e clearAllBrowsingData().
• Mantieni più istanze del browser caricate con hidden, hide(), e show() preservando lo stato della pagina.
• Incorpora web app avanzate che richiedono proxy delle richieste, upload di file, download, controllo dei popup, supporto Google Pay, _blank gestione dei link e messaggistica app-pagina.

Funzionalità principali

• open - Apre un URL in Chrome Custom Tabs su Android o SFSafariViewController su iOS.
• openWebView - Apre una WebView nativa gestita con toolbar personalizzata, dimensionamento, navigazione nativa, messaggistica, scripting, proxy, download, popup e controlli sui dati.
• sendToBack / bringToFront - Sposta un browser gestito dietro o sopra la WebView host di Capacitor.
• dispatchInputEvent - Inoltra eventi di click, touch e scroll a un browser posizionato dietro l'interfaccia nativa.
• updateDimensions - Modifica dimensioni e posizione della WebView gestita senza ricaricare la pagina.
• hide / show - Mantiene caricate le WebView gestite mentre ne rimuove o ripristina la visualizzazione nativa.
• postMessage / executeScript - Connette l'app Capacitor con il JavaScript in esecuzione nella pagina gestita.
• clearAllBrowsingData / persistWebViewData - Gestisce cookie, cache, storage, IndexedDB e la persistenza della sessione.
• handleDownloads, regole proxy ed eventi popup - Supporta portali documentali, flussi di upload, pagine di pagamento e web app integrate.

Pubblico API

Metodo	Descrizione
goBack	Naviga all'indietro nella cronologia della WebView, se possibile.
open	Apri un URL in una nuova finestra a tutto schermo; su Android usa Chrome Custom Tabs, su iOS usa SFSafariViewController.
clearCookies	Cancella i cookie di un URL quando id se omesso, si applica a tutte le webview aperte.
clearAllCookies	Cancella tutti i cookie quando id se omesso, si applica a tutte le webview aperte.
clearCache	Cancella la cache quando id se omesso, si applica a tutte le webview aperte.
clearAllBrowsingData	Cancella cookie, cache, local storage, session storage, IndexedDB e altri dati di navigazione dal repository predefinito e dalle WebView gestite.
getCookies	Recupera i cookie per un URL specifico.
close	Chiudi la webview. Quando id se omettuto, chiude la webview attiva.
hide	Nasconde la webview senza chiuderla. Usa show() per ripristinarla. Quando id viene omesso, punta alla webview attiva.
show	Mostra una webview precedentemente nascosta. Quando id viene omesso, punta alla webview attiva.
sendToBack	Sposta il browser nativo dietro la WebView host di Capacitor così che l'UI dell'app possa apparire sopra di essa.
bringToFront	Sposta in primo piano un browser che si trovava dietro la WebView host.
dispatchInputEvent	Invia input di click, touch o scroll a un browser gestito; le coordinate sono relative alla viewport del browser.
openWebView	Apre un URL in una nuova webview con toolbar e funzionalità avanzate, come accesso alla fotocamera, ai file, ascolto di eventi, iniezione di javascript, comunicazione bidirezionale, ecc.
executeScript	Inietta JavaScript code nella finestra dell'InAppBrowser. Quando id viene omesso, viene eseguito in tutte le webview aperte.
postMessage	Invia un evento alla webview (in-app browser). Ascolta nella pagina con window.addEventListener('messageFromNative', listenerFunc). L' detail il payload deve essere serializzabile in JSON. Quando id viene omesso, fa broadcast a tutte le webview aperte.
takeScreenshot	Cattura il viewport della webview corrente come screenshot PNG. Quando id viene omesso, punta alla webview attiva.
setUrl	Imposta l'URL della webview. Quando id viene omesso, punta alla webview attiva.
addListener	Ascolta il cambio di URL, solo per openWebView.
addListener	Ascolta gli buttonNearDoneClick; il payload contiene la webview id.
addListener	Ascolta il click di chiusura solo per openWebView.
addListener	Viene attivato quando l'utente clicca sul pulsante di conferma se è richiesto il disclaimer; funziona con openWebView shareDisclaimer e closeModal.
addListener	Viene emesso quando la webview invia un evento all'app. Usa window.mobileApp.postMessage(...) nella pagina e mantieni il payload JSON-serializable.
addListener	Viene attivato ogni volta che viene catturato uno screenshot tramite il plugin API, il pulsante screenshot nativo o il bridge JavaScript iniettato.
addListener	Viene attivato al caricamento della pagina.
addListener	Will be triggered when page load error.
addListener	Viene attivato dopo che la gestione nativa dei download ha salvato un file in locale. Abilitalo con handleDownloads: true all'apertura della webview.
addListener	Viene attivato quando la gestione nativa dei download fallisce. Abilitalo con handleDownloads: true all'apertura della webview.
addListener	Viene attivato ogni volta che una pagina apre un popup o una nuova finestra. Usa l'id del popup restituito con executeScript, postMessage, show, hide, e close.
addListener	Ascolta le richieste proxy delegate dal runtime nativo. Preferisci addProxyHandler() invece di chiamarlo direttamente.
addListener	Ascolta l'output della console JavaScript emesso dalla pagina gestita. Abilitalo con captureConsoleLogs: true all'apertura della webview.
handleProxyRequest	Metodo interno utilizzato da addProxyHandler() per inviare una decisione proxy al nativo. Inoltra l'originale phase quando si risponde a un proxyRequest listener.
removeAllListeners	- Rimuove tutti i listener di questo plugin.
reload	Ricarica la pagina web corrente.
updateDimensions	Aggiorna le dimensioni della webview. Permette di cambiare dimensione e posizione della webview a runtime. Se id viene omesso, punta alla webview attiva.
setEnabledSafeTopMargin	Imposta il margine superiore safe della webview a runtime. Se id viene omesso, punta alla webview attiva. Su Web, questo metodo non ha effetto e si risolve senza cambiare il layout.
setEnabledSafeBottomMargin	Imposta il margine inferiore safe della webview a runtime. Se id viene omesso e punta alla webview attiva. Su Web, questo metodo non ha effetto e si risolve senza cambiare il layout.
openSecureWindow	Apre una finestra OAuth2 sicura. Su web, restituisce l'URL di reindirizzamento tramite un BroadcastChannel; su mobile, registra un redirect URI personalizzato nella configurazione dell'app. Consulta la guida quickstart per gli esempi completi su HTML, Info.plist e AndroidManifest.

Valori di riferimento

Usa questi valori con le opzioni della toolbar quando apri un in-app browser o una WebView.

Tipi di Toolbar

Valore	L'utente troverà
activity	Toolbar semplice con controlli di chiusura e condivisione.
compact	Toolbar semplice con controllo di chiusura.
navigation	Barra di navigazione completa con controlli avanti e indietro.
blank	Senza toolbar.

Fonte di verità

Questo riferimento è sincronizzato da src/definitions.ts nella capacitor-inappbrowser.

Continua da @capgo/capacitor-inappbrowser

Se stai usando @capgo/capacitor-inappbrowser per pianificare il lavoro sui plugin nativi, collegalo a Utilizzo di @capgo/capacitor-inappbrowser per la funzionalità nativa in Utilizzo di @capgo/capacitor-inappbrowser, Directory dei plugin di Capgo per il workflow del prodotto nella Capgo Plugin Directory, Plugin Capacitor di Capgo per i dettagli di implementazione in Capacitor Plugins di Capgo, Aggiunta o aggiornamento dei plugin per i dettagli su come aggiungere o aggiornare i plugin, e Alternative ai plugin Ionic Enterprise per il workflow del prodotto in Alternative ai plugin Ionic Enterprise.