In-App-Browser Capacitor Plugin

Mit @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser öffnet externe Webinhalte aus einer Capacitor-App. Nutze open() für die Browser-Oberfläche der Plattform oder openWebView() wenn deine App einen verwalteten nativen WebView mit benutzerdefinierter Größe, Toolbar, Nachrichten, Skripten, Downloads, Proxying, Popup-Steuerung, privatem Speicher oder Ionic UI über der Seite benötigt.

Installieren

npm install @capgo/capacitor-inappbrowser
npx cap sync

Was dieses Plugin bereitstellt

• System-Browser-Flow mit Chrome Custom Tabs auf Android und SFSafariViewController auf iOS.
• Verwaltete WebViews, die skaliert, ausgeblendet, angezeigt, hinter die Capacitor App geschoben oder wieder in den Vordergrund geholt werden können.
• Weiterleitung von Klicks, Touches und Scroll-Events, dispatchInputEvent() wenn das App-UI über dem Browser liegt.
• Teilbildschirm-Browser, bei denen Taps außerhalb des nativen WebView-Frames auf Android und iOS an die Capacitor App durchgereicht werden.
• Bereinigung von Cookies, Cache und gesamten Browsing-Daten mit persistWebViewData, clearCookies, clearAllCookies, clearCache, und clearAllBrowsingData.
• App-zu-Seite-Kommunikation mit postMessage(), Seite-zu-App-Kommunikation mit window.mobileApp.postMessage(...), sowie Script-Injection mit executeScript().
• Download-Handling, native-first Proxy-Regeln, Popup-Steuerung, Google Pay Support, _blank Link-Handling und versteckte, vorladbare Browser-Instanzen.

Häufige Anwendungsfälle

App-UI über einem Live-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 });

Nutze dies für Checkout-Overlays, browserbasierte Payment-Flows, geführte Support-Flows oder jede Funktion, bei der Ionic-Steuerelemente über Live-Web-Content bleiben müssen.

App trotz Browser-Sheet klickbar halten

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

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

Ein Browser mit benutzerdefinierter Größe erfasst Touches nur innerhalb seines Frames. Der übrige sichtbare App-Bereich bleibt auf Android und iOS tippbar.

Persistente Web-Sessions vermeiden

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

Nutze dies für Account-Wechsel, Checkout-Tests, Support-Impersonation oder Auth-Flows, bei denen Cookies, Cache, Local Storage und IndexedDB nicht länger als nötig bestehen bleiben sollen.

Mehrere WebViews vorladen und tauschen

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 State verfügbar und vermeiden native Overlays, die App-Touches blockieren.

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

Nutze dieses Pattern für Dokumentenportale, Upload-Flows, Support-Desks, Videoanrufe, Google-Pay-Seiten oder interaktive Web-Apps, die native App-Steuerung brauchen, ohne die App-Shell zu verlassen.

Vollständige Referenz

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

Weiter mit der Nutzung von @capgo/capacitor-inappbrowser

Wenn du es nutzt Mit @capgo/capacitor-inappbrowser Um die Arbeit an nativen Plugins zu planen, verbinde sie mit @capgo/capacitor-inappbrowser für Details zur Implementierung in @capgo/capacitor-inappbrowser, Erste Schritte für die Implementierungsdetails in Erste Schritte, Capgo Plugin-Verzeichnis für den Produkt-Workflow im 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.