Mit @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser öffnet externe Webinhalte aus einer Capacitor-App. Verwenden open() für die Plattformoberfläche Browser oder openWebView() wenn Ihre App eine verwaltete native WebView mit benutzerdefinierter Größe, Toolbar, Nachrichten, Skripten, Downloads, Proxying, Popup-Steuerung, privatem Speicher oder Ionic-UI über der Seite benötigt.

Installieren

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was diese Plugin-Exposen

Systembrowser-Fluss mit Chrome-Custom-Tabs auf Android und SFSafariViewController auf iOS.
Verwaltete WebViews, die sich gruppieren, verstecken, zeigen, hinter der Capacitor-App verschieben und wieder nach vorne bringen lassen.
Klick-, Touch- und Scroll-Forwarding mit dispatchInputEvent() wenn die App-UI über der Browseroberfläche liegt.
Browserfenster, die außerhalb des nativen WebView-Frames auf Android und iOS angeklickt werden, passen durch zu der Capacitor-App.
Cookie-, Cache- und volle Browsereinstellungen löschen mit persistWebViewData, clearCookies, clearAllCookies, clearCache, und clearAllBrowsingData.
App-zu-Seitenkommunikation mit postMessage(), Seiten-zu-App-Kommunikation mit window.mobileApp.postMessage(...), und Skriptinjection mit executeScript().
Herunterladen, native-erste Proxyregeln, Popupsteuerung, Google Pay-Unterstützung, _blank Linkverarbeitung und versteckte vorläufige Browserinstanzen.

Häufige Anwendungsfälle

App-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 Kassenüberlays, browsergestützte Zahlungsabwicklungen, unterstützte Flüsse oder jede Funktion, bei der Ionic-Steuerungen über lebendes Webinhalte bleiben müssen.

App bleibt klickbar, während ein Browserblatt geöffnet ist

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

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

A Browser greift nur auf Berührungen innerhalb seines Rahmens zu. Die verbleibende sichtbare App-Oberfläche bleibt auf Android und iOS tippbar.

Vermeide persistente Web-Sitzungen

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

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

Verwende dies für das Konto-Wechseln, das Checkout-Testen, die Unterstützung des Benutzers, die Authentifizierung oder Auth-Flows, bei denen Cookies, Cache, lokale Speicherung und IndexedDB nicht länger als nötig überleben sollten.

Vorkomprimieren 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 Überlagerungen vermeiden, die die App-Berührung blockieren.

Einsetzen eines fortgeschrittenen Web-Apps

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' },
});

Verwende dieses Muster für Dokument-Portale, Upload-Flows, Unterstützungsbüros, Videotelefonate, Google Pay-Seiten oder interaktive Web-Apps, die ohne das Verlassen der App-Shell native App-Kontrolle benötigen.

Vollständige Referenz

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

Fortsetzen von @capgo/capacitor-inappbrowser

Wenn Sie Mit @capgo/capacitor-inappbrowser native Plugin-Arbeit 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 Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren.

In-App-Browser

Tutorial zum In-App-Browser