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 benutzerdefinierter Größe, Toolbar, Nachrichten, Skripten, Downloads, Proxying, Popup-Steuerung, privatem Speicher oder einer Ionic-UI-Schicht über der Seite benötigt. openWebView() Installieren

Was diese Plugin-Exposition enthält

npm install @capgo/capacitor-inappbrowser
npx cap sync

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

Safari auf iOS SFSafariViewController auf iOS.
Verwaltete WebViews, die sich größern lassen, versteckt, gezeigt, hinter der Capacitor-App verschoben und wieder nach vorne gebracht werden können.
Klick-, Berührung- und Scroll-Forwarding mit dispatchInputEvent() Wenn die App-UI oben über dem Browser liegt.
Browser, die nur einen Teil des Bildschirms einnehmen, wobei Berührungen außerhalb des ursprþnglichen WebView-Frames auf die Capacitor-App auf Android und iOS weitergeleitet werden.
Cookie-, Cache- und volle Browsereinstellungen zur Änderung 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().
Download-Handling, native-erste Proxy-Regeln, Popup-Kontrolle, Google Pay-Unterstützung, _blank Link-Handling und versteckte, vorabladbare Browser-Instanzen.

Gemeinsame Verwendungsfälle

Leg App-UI über einem lebenden Browser

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, browsergestützte Zahlungsflüsse, geführte Supportflüsse oder jede Funktion, bei der Ionic-Kontrollen über lebendige Webinhalte bleiben müssen.

Halten Sie die App klickbar um einen Browserblatt

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 fängt nur Berührungen innerhalb seines Rahmens auf. Die verbleibende sichtbare Appfläche bleibt auf Android und iOS tippbar.

Vermeiden Sie persistente Web-Sitzungen

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 Umstellen von Konten, Checkout-Test, Support-Impersonation oder Auth-Flüsse, bei denen Cookies, Cache, lokale Speicherung und IndexedDB nicht länger als nötig überleben sollten.

Vorladen und austauschen Sie mehrere WebViews

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 App-Berührungen blockieren.

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

Verwenden Sie dieses Muster für Dokumentportale, Upload-Flüsse, Support-Desks, Videogespräche, Google Pay-Seiten oder interaktive Web-Apps, die native App-Kontrolle ohne das Verlassen der App-Shell benötigen.

Vollständige Referenz

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

Weitermachen von Using @capgo/capacitor-inappbrowser

Wenn Sie Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser verwenden Using @capgo/capacitor-inappbrowser @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser für die Implementierungsdetails in @capgo/capacitor-inappbrowser for the implementation detail in @capgo/capacitor-inappbrowser, für die Implementierungsdetails in Anleitung zum Starten __CAPGO_KEEP_0__ Plugin-Verzeichnis Capgo Plugin Directory 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 zur In-App-Browser-Funktion