Verwenden Sie @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser Öffnet externe Webinhalte aus einer Capacitor-App. Verwenden Sie dies open() für die 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 einer Ionic-UI-Schicht über der Seite benötigt.

Installieren

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was diese Plugin-Exposition enthält

Systembrowser-Fluss mit Chrome-Custom-Tabs auf Android und SFSafariViewController auf 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.
Teilbildschirmbrowser, bei denen Berühe außerhalb des nativen WebView-Frames auf die Capacitor-App auf Android und iOS weitergeleitet werden.
Cookie-, Cache- und vollständige Browsereinstellungen zur Datenreinigung 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.

Verwendungshinweise

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 Zahlungsflüsse, geführte Support-Flüsse oder jede Funktion, bei der Ionic-Steuerungen über lebendes Web-Inhalt bleiben müssen.

App klicken, während ein Browserblatt 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. 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 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 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 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, Support-Desks, Videogespräche, 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 Anleitung zum Starten für die Implementierungsdetails in Anleitung zum Starten 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