In-App-Browser Capacitor-Plugin

Mit @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser eröffnet externe Webinhalte aus einer Capacitor-App. open() für die Plattform-Browser-Oberfläche openWebView() when your app needs a managed native WebView with custom size, toolbar, messages, scripts, downloads, proxying, popup control, private storage, or Ionic UI layered above the page.

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was Diese Erweiterung Bereitstellt

• System browser flow 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.
• Klicken, berühren und scrollen weiter dispatchInputEvent() Klick-, Touch- und Scroll-Forwarding mit
• Teilbildschirmbrowser, bei denen Berührungen außerhalb des nativen WebView-Frames auf das Capacitor-App auf Android und iOS weitergeleitet werden.
• Koekien, Cache und vollständige Datenlöschen mit persistWebViewData, clearCookies, clearAllCookies, clearCache, und clearAllBrowsingData.
• App-zu-Seiten-Kommunikation mit postMessage(), Seiten-zu-App-Kommunikation mit window.mobileApp.postMessage(...), und Skriptinjektion mit executeScript().
• Herunterladen, native-erste Proxy-Regeln, Popup-Kontrolle, Google Pay-Unterstützung _blank Link-Handling und versteckte vorläufige 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 Zahlungsflüsse, geführte Support-Flüsse oder jede Funktion, bei der Ionic-Kontrollen über lebendem Web-Inhalt bleiben müssen.

App klicken Sie um die Browser-Sheet herum

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 App-Area bleibt auf Android und iOS tippbar.

Auf Persistenten Web-Sitzungen verzichten

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 Vortäuschens oder Auth-Flüsse, bei denen Cookies, Cache, lokale Speicher 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 die App-Tasten blockieren.

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

Verwende dieses Muster für Dokumentportale, Upload-Flüsse, Unterstützungsdesks, Videogespräche, 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-in-app-Browser/
• Dokumentation: /docs/plugins/inappbrowser/

Fortsetzen von Using @capgo/capacitor-inappbrowser

Wenn du __CAPGO_KEEP_0__-inappbrowser verwendest Mit @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 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.