@capgo/capacitor-inappbrowser

Übersicht

@capgo/capacitor-inappbrowser bietet Capacitor Apps zwei Browser-Pfade: open() für das System-Browser-Erlebnis und openWebView() für eine verwaltete native WebView, die deine App in der Größe anpassen, ausblenden, ansprechen, skripten, proxien und mit Ionic UI überlagern kann.

Nutze es, wenn die Seite mehr als einen einfachen externen Browser benötigt: OAuth- und Checkout-Flows, eingebettete Support-Portale, Payment-Screens, Videoanrufe, Dokumenten-Portale, interaktive Web-Apps oder jeden Flow, bei dem deine App native Steuerelemente um Live-Webinhalte benötigt.

Package-Name geändert.

Häufige Anwendungsfälle

• Lege Ionic oder Capacitor UI über eine Live-Browserseite mit toBack, sendToBack(), bringToFront(), transparentBackground, und dispatchInputEvent().
• Erstelle Browser mit Teilbildschirm, Bottom Sheets und Picture-in-Picture Webviews mit width, height, x, y, und updateDimensions().
• Lass Nutzer auf die Capacitor App außerhalb eines benutzerdefinierten Browser-Frames auf Android und iOS tippen.
• Führe Checkout-, Login-, Support- oder Account-Switching-Flows ohne persistente Website-Speicherung aus mit persistWebViewData: false und clearAllBrowsingData().
• Halte mehrere Browser-Instanzen geladen mit hidden, hide(), und show() während der Page-State erhalten bleibt.
• Bette fortgeschrittene Web-Apps ein, die Request-Proxying, File Uploads, Downloads, Popup-Steuerung, Google Pay Support, _blank Link-Handling und App-to-Page-Messaging benötigen.

Kernfunktionen

• open - Öffnet eine URL in Chrome Custom Tabs auf Android oder SFSafariViewController auf iOS.
• openWebView - Öffnet eine verwaltete native WebView mit Custom Toolbar, Sizing, nativer Navigation, Messaging, Scripting, Proxy, Downloads, Popups und Datenkontrolle.
• sendToBack / bringToFront - Platziert einen verwalteten Browser hinter oder über der Capacitor Host-WebView.
• dispatchInputEvent - Leitet Klick-, Touch- und Scroll-Events an einen Browser weiter, der hinter der nativen App-UI liegt.
• updateDimensions - Ändert Größe und Position der verwalteten WebView, ohne die Seite neu zu laden.
• hide / show - Hält verwaltete WebViews geladen, während die native Darstellung entfernt oder wiederhergestellt wird.
• postMessage / executeScript - Verbindet die Capacitor App mit JavaScript, das innerhalb der verwalteten Seite läuft.
• clearAllBrowsingData / persistWebViewData - Steuert Cookies, Cache, Storage, IndexedDB und Session-Persistenz.
• handleDownloads, Proxy-Regeln und Popup-Events – Unterstützt Dokumentenportale, Upload-Flows, Zahlungsseiten und eingebettete Web-Apps.

Öffentliches API

Methode	Beschreibung
goBack	Navigiert nach Möglichkeit in der History der WebView zurück.
open	Öffnet die URL in einem neuen Vollbildfenster. Auf Android werden Chrome Custom Tabs verwendet, auf iOS der SFSafariViewController.
clearCookies	Cookies der URL löschen, wenn id weggelassen wird, gilt dies für alle offenen WebViews.
clearAllCookies	Alle Cookies löschen, wenn id weggelassen wird, gilt dies für alle offenen WebViews.
clearCache	Cache löschen, wenn id weggelassen wird, gilt dies für alle offenen WebViews.
clearAllBrowsingData	Löscht Cookies, Cache, Local Storage, Session Storage, IndexedDB und andere Browserdaten aus dem Standard-Speicher und den verwalteten WebViews.
getCookies	Ruft Cookies für eine bestimmte URL ab.
close	Die WebView schließen. Wenn id weggelassen wird, wird die aktive WebView geschlossen.
hide	Die WebView ausblenden, ohne sie zu schließen. Nutze show(), um sie wieder anzuzeigen. Wenn id weggelassen wird, wird die aktive Webview verwendet.
show	Zeigt eine zuvor verborgene WebView an. Wenn id weggelassen wird, wird die aktive Webview verwendet.
sendToBack	Verschiebt den nativen Browser hinter die Capacitor Host-WebView, damit das App-UI darüber liegen kann.
bringToFront	Verschiebt einen Browser, der hinter der Host-WebView lag, wieder in den Vordergrund.
dispatchInputEvent	Leitet Click-, Touch- oder Scroll-Inputs an einen verwalteten Browser weiter; die Koordinaten beziehen sich auf das Browser-Viewport.
openWebView	Öffnet eine URL in einer neuen WebView mit Toolbars und erweiterten Funktionen wie Kamera- und Dateizugriff, Event-Listening, JavaScript-Injection, bidirektionaler Kommunikation etc.
executeScript	Injektiert JavaScript code in das InAppBrowser-Fenster. Wenn id wird ausgelassen und wird in allen offenen Webviews ausgeführt.
postMessage	Sendet ein Event an die Webview (In-App-Browser). Auf der Seite mit folgendem Code abfangen: window.addEventListener('messageFromNative', listenerFunc). Die detail Der Payload muss JSON-serialisierbar sein. Wenn id wird ausgelassen und sendet an alle offenen Webviews.
takeScreenshot	Erstellt einen PNG-Screenshot des aktuellen Webview-Viewports. Wenn id weggelassen wird, wird die aktive Webview verwendet.
setUrl	Setzt die URL der Webview. Wenn id weggelassen wird, wird die aktive Webview verwendet.
addListener	Auf URL-Änderungen hören, nur für openWebView.
addListener	Hören auf buttonNearDoneClick; der Payload enthält die Webview id.
addListener	Auf Klick auf Schließen hören, nur für openWebView.
addListener	Wird ausgelöst, wenn der User auf den Bestätigungsbutton klickt, falls ein Disclaimer erforderlich ist; funktioniert mit openWebView shareDisclaimer und closeModal.
addListener	Wird gefeuert, wenn die Webview ein Event an die App zurücksendet. Nutze window.mobileApp.postMessage(...) auf der Seite und stelle sicher, dass der Payload JSON-serialisierbar ist.
addListener	Wird ausgelöst, sobald ein Screenshot über das API Plugin, die native Screenshot-Taste oder die injizierte JavaScript-Bridge aufgenommen wird.
addListener	Wird ausgelöst, wenn die Seite geladen wird.
addListener	Will be triggered when page load error.
addListener	Wird ausgelöst, nachdem das native Download-Handling eine Datei lokal gespeichert hat. Aktivieren Sie dies mit handleDownloads: true beim Öffnen der WebView.
addListener	Wird ausgelöst, wenn das native Download-Handling fehlschlägt. Aktivieren Sie dies mit handleDownloads: true beim Öffnen der WebView.
addListener	Wird ausgelöst, wenn eine Seite ein Popup oder ein neues Fenster öffnet. Verwenden Sie die zurückgegebene Popup-ID mit executeScript, postMessage, show, hide, und close.
addListener	Lauschen Sie auf proxied Requests, die vom Native Runtime delegiert werden. Bevorzugen Sie addProxyHandler() anstatt dies direkt aufzurufen.
addListener	Lauschen Sie auf JavaScript-Console-Ausgaben der verwalteten Seite. Aktivieren Sie dies mit captureConsoleLogs: true beim Öffnen der WebView.
handleProxyRequest	Interne Methode, die von addProxyHandler() um eine Proxy-Entscheidung an den Native-Teil zurückzugeben. Leite das Original phase beim Antworten auf eine manuelle proxyRequest Listener.
removeAllListeners	Entfernt alle Listener für dieses Plugin.
reload	Die aktuelle Webseite neu laden.
updateDimensions	Aktualisiert die Dimensionen der Webview. Ermöglicht das Ändern von Größe und Position der Webview zur Laufzeit. Wenn id weggelassen wird, wird die aktive Webview verwendet.
setEnabledSafeTopMargin	Legt den aktivierten Safe-Top-Margin der Webview zur Laufzeit fest. Wenn id weggelassen wird, wird die aktive Webview angesprochen. Im Web ist diese Methode ein No-op und wird ohne Layoutänderung aufgelöst.
setEnabledSafeBottomMargin	Legt den aktivierten Safe-Bottom-Margin der Webview zur Laufzeit fest. Wenn id wird ausgelassen und zielt auf die aktive WebView ab. Im Web ist diese Methode ein No-op und wird ohne Layoutänderung aufgelöst.
openSecureWindow	Öffnet ein sicheres OAuth2-Fenster. Im Web wird die umgeleitete URL über einen BroadcastChannelzurückgegeben; auf Mobile registrierst du eine benutzerdefinierte Redirect URI in deiner App-Konfiguration. Siehe den Getting-Started-Guide für vollständige HTML-, Info.plist- und AndroidManifest-Beispiele.

Referenzwerte

Verwende diese Werte mit Toolbar-Optionen beim Öffnen eines In-App-Browsers oder einer WebView.

Toolbar-Typen

Wert	Der Nutzer findet
activity	Einfache Toolbar mit Close- und Share-Steuerelementen.
compact	Einfache Toolbar mit Close-Steuerelement.
navigation	Vollständige Navigationsleiste mit Vor- und Zurück-Buttons.
blank	Keine Toolbar.

Source of Truth

Diese Referenz wird synchronisiert von src/definitions.ts in capacitor-inappbrowser.

Weiter mit @capgo/capacitor-inappbrowser

Wenn du es nutzt @capgo/capacitor-inappbrowser Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Mit @capgo/capacitor-inappbrowser für die native Funktionalität bei der Nutzung von @capgo/capacitor-inappbrowser, Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für das Implementierungsdetail beim Hinzufügen oder Aktualisieren von Plugins, und Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow bei den Ionic Enterprise Plugin-Alternativen.