Verwenden Sie @capgo/capacitor-inappbrowser

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

Installieren

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was dieser Plugin bereitstellt

Systembrowser-Flow mit Chrome-Custom-Tabs auf Android und SFSafariViewController auf iOS.
Verwaltete WebViews, die sich gruppieren, verbergen, zeigen, hinter der Capacitor-App verschieben und wieder nach vorne bringen lassen.
Klick-, Berührung- und Scroll-Forwarding mit dispatchInputEvent() wenn die App-UI über der Browser-UI liegt.
Browser, die nur einen Teil des Bildschirms einnehmen, wobei Berührungen außerhalb des nativen WebView-Frames auf die Capacitor-App auf Android und iOS weitergeleitet werden.
Cookie-, Cache- und volle Browsing-Daten-Lösung 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.

Verwendungsfä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 Überlays zum Checkout, browsergestützte Zahlungsflüsse, unterstützte Flüsse für die Unterstützung oder jede Funktion, bei der Ionic-Kontrollen über lebendige Webinhalte bleiben müssen.

App-Klickbar halten, während ein Browser-Sheet sichtbar ist

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

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

Eine benutzerdefinierte Größe des Browsers fängt nur Berührungen innerhalb seines Rahmens auf. Die verbleibende sichtbare App-Area bleibt auf Android und iOS klickbar.

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 Umstellen von Konten, Testen des Checkout, Unterstützung der Personifizierung, 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.

Ein fortschrittliches 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 diesen Muster für Dokument-Portale, Upload-Flüsse, Unterstützungsbüros, 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 von Using @capgo/capacitor-inappbrowser

Wenn Sie Using verwenden Using @capgo/capacitor-inappbrowser um native Plugin-Arbeit zu planen, verbinden Sie es mit @capgo/capacitor-inappbrowser für die Implementierungsdetails in @capgo/capacitor-inappbrowser Getting Started für die Implementierungsdetails in Getting Started 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

Anleitung zur In-App-Browser-Funktion