Mit @capgo/capacitor-inappbrowser öffnet man externe Webinhalte aus einer capgo-App. Verwenden Sie

@capgo/capacitor-inappbrowser opens external web content from a Capacitor app. Use open() wenn Ihre App eine verwaltete native WebView mit individueller Größe, Toolbar, Nachrichten, Skripten, Downloads, Proxying, Popup-Steuerung, privatem Speicher oder Ionic-UI über der Seite benötigt. openWebView() Installieren

Was diese Plugin-Exposé enthält

npm install @capgo/capacitor-inappbrowser
npx cap sync

Browser-Fluss mit Chrome-Custom-Tabs auf Android und

__CAPGO_KEEP_0__ SFSafariViewController On iOS.
Verwaltete WebViews, die sich größern lassen, verstecken, zeigen, hinter der Capacitor-App verschieben und wieder nach vorne bringen.
Klick-, Touch- und Scroll-Forwarding mit dispatchInputEvent() Wenn die App-UI sich oben über dem Browser befindet.
Teilbildschirm-Browser, bei denen Tasten außerhalb des nativen WebView-Frames auf die Capacitor-App auf Android und iOS weitergeleitet werden.
Cookie-, Cache- und volle Browsereinstellungen löschen mit persistWebViewData, clearCookies, clearAllCookies, clearCache, und clearAllBrowsingData.
Kommunikation zwischen App und Seite mit postMessage(), Kommunikation zwischen Seite und App mit window.mobileApp.postMessage(...), und Skriptinjektion mit executeScript().
Herunterladen, native-erste Proxy-Regeln, Popup-Kontrolle, Google Pay-Unterstützung, _blank Link-Handling und versteckte, vorabladbare Browser-Instanzen.

Gemeinsame Verwendungsfälle

Browser-UI über einem lebenden Browser platzieren

import { InAppBrowser } from '@capgo/capacitor-inappbrowser';

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/checkout',
  toBack: true,
  transparentBackground: true,
});

await InAppBrowser.dispatchInputEvent({
  id,
  type: 'click',
  x: 160,
  y: 420,
});

await InAppBrowser.bringToFront({ id });

Verwenden Sie dies für Überlays zum Checkout, browser-gestützten Zahlungsflüssen, geführten Supportflüssen oder jede Funktion, bei der Ionic-Steuerungen über lebendes Webinhalte bleiben müssen.

App um einen Browserblatt klicken lassen

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

Ein benutzerdefinierter Browser erfasst nur Berührungen innerhalb seines Rahmens. Der verbleibende sichtbare App-Bereich bleibt auf Android und iOS tippbar.

Persistenten Web-Sitzungen vermeiden

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

Verwenden Sie dies für das Konto-Wechseln, Checkout-Test, Support-Impersonation oder Auth-Flows, bei denen Cookies, Cache, lokale Speicherung und IndexedDB nicht länger als nötig überleben sollten.

Vorladen und mehrere WebViews austauschen

const first = await InAppBrowser.openWebView({ url: 'https://example.com/a', hidden: true });
const second = await InAppBrowser.openWebView({ url: 'https://example.com/b', hidden: true });

await InAppBrowser.show({ id: first.id });
await InAppBrowser.hide({ id: first.id });
await InAppBrowser.show({ id: second.id });

Versteckte Instanzen halten ihren Zustand verfügbar, während sie native Überlays vermeiden, die App-Berührungen blockieren.

Ein erweitertes Web-App einbetten

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/portal',
  handleDownloads: true,
  openBlankTargetInWebView: true,
  hiddenPopupWindow: true,
  outboundProxyRules: [
    {
      urlRegex: '^https://example\\.com/api/',
      action: 'delegateToJs',
    },
  ],
});

await InAppBrowser.postMessage({
  id,
  detail: { source: 'app', action: 'refresh' },
});

Verwenden Sie dieses Muster für Dokument-Portale, Upload-Flüsse, Support-Desks, Videotelefonate, Google Pay-Seiten oder interaktive Web-Apps, die native App-Kontrolle ohne das Verlassen der App-Hülle benötigen.

Vollständige Referenz

GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
Dokumentation: /docs/plugins/inappbrowser/

Weitermachen Sie mit der Verwendung von @capgo/capacitor-inappbrowser

Wenn Sie die Verwendung von Die Verwendung von @capgo/capacitor-inappbrowser um native Plugin-Arbeit zu planen, verbinden Sie es mit @capgo/capacitor-inappbrowser für die Implementierungsdetails in @capgo/capacitor-inappbrowser, Einstieg für die Implementierungsdetails in Einstieg, Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, und Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins.

In-App-Browser

Tutorial zum In-App-Browser