Verwenden Sie @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser Öffnet externe Webinhalte aus einer Capacitor-App. Verwenden Sie dies open() für die Plattformbrowseroberfläche oder openWebView() 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.

Installieren

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was diese Erweiterung bereitstellt

Systembrowser-Fluss mit Chrome Custom Tabs auf Android und SFSafariViewController auf iOS.
Gestutzte WebViews, die sich größern lassen, ausgeblendet, gezeigt, hinter der Capacitor-App verschoben und wieder nach vorne gebracht werden können.
Klick-, Touch- und Scroll-Weiterleitung, wenn die App-UI sich oben über dem Browser befindet. dispatchInputEvent() Teilbildschirmbrowser, bei denen Tasten außerhalb des nativen WebView-Frames auf Android und iOS an die __CAPGO_KEEP_0__-App weitergeleitet werden.
Partial-screen browsers where taps outside the native WebView frame pass through to the Capacitor app on Android and iOS.
und persistWebViewData, clearCookies, clearAllCookies, clearCacheKommunikation zwischen App und Seite mit clearAllBrowsingData.
Kommunikation zwischen Seite und App mit postMessage()und Skriptinjektion mit window.mobileApp.postMessage(...)pagePath executeScript().
Herunterladen-Handling, native-first Proxy-Regeln, Pop-up-Kontrolle, Google Pay-Unterstützung, _blank Link-Handling und versteckte vorladbare Browser-Instanzen.

Gemeinsame 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, Browser-gestützte Zahlungsabwicklungen, geführte Support-Flows oder jede Funktion, bei der Ionic-Kontrollen über lebendige Web-Inhalte bleiben müssen.

App-Klickbarkeit um einen Browser-Sheet herum halten

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-Oberfläche 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, 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 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 Dokumentportale, Upload-Flüsse, Support-Desks, Videotelefonate, Google Pay-Seiten oder interaktive Webanwendungen, 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 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser verwenden Using @capgo/capacitor-inappbrowser Um native Plugin-Arbeit zu planen, verbinden Sie es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser für die Implementierungsdetails in @capgo/capacitor-inappbrowser for the implementation detail in @capgo/capacitor-inappbrowser, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser Für die Implementierungsdetails in Getting Started, Capgo Plugin-Verzeichnis Für die 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