Navigateur intégré à l'application Plugin Capacitor

Utilisation de @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser ouvre du contenu web externe depuis une application Capacitor. Utilisez open() pour la surface navigateur de la plateforme, ou openWebView() lorsque votre application nécessite une WebView native gérée avec taille personnalisée, barre d'outils, messages, scripts, téléchargements, proxy, contrôle des popups, stockage privé ou interface Ionic superposée à la page.

Installer

npm install @capgo/capacitor-inappbrowser
npx cap sync

Ce que ce plugin expose

• Flux de navigateur système avec Chrome Custom Tabs sur Android et SFSafariViewController sur iOS.
• WebViews gérées pouvant être redimensionnées, masquées, affichées, déplacées derrière l'application Capacitor et ramenées au premier plan.
• Transfert des clics, touches et défilements avec dispatchInputEvent() when app UI sits above the browser.
• Navigateurs en écran partiel : les clics hors du cadre de la WebView native sont transmis à l'app Capacitor sur Android et iOS.
• Nettoyage complet des cookies, cache et données de navigation avec persistWebViewData, clearCookies, clearAllCookies, clearCache, et clearAllBrowsingData.
• Communication app vers page avec postMessage(), communication page vers app avec window.mobileApp.postMessage(...), et l'injection de script avec executeScript().
• Gestion du téléchargement, règles de proxy native-first, contrôle des popups, support de Google Pay, _blank gestion des liens et instances de navigateur préchargées et cachées.

Cas d'usage courants

Placer l'UI de l'app au-dessus d'un navigateur Live Update

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 });

Utilisez ceci pour les overlays de paiement, les flux de paiement via navigateur, les flux de support guidés ou toute fonctionnalité où les contrôles Ionic doivent rester au-dessus du contenu web en direct.

Garder l'app cliquable autour d'une feuille de navigateur

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

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

Un navigateur de taille personnalisée ne capture que les touches à l'intérieur de son cadre. Le reste de la zone visible de l'app reste cliquable sur Android et iOS.

Éviter les sessions web persistantes

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

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

Utilisez ceci pour le changement de compte, les tests de paiement, l'impersonnalisation pour le support ou les flux d'auth où les cookies, le cache, le local storage et IndexedDB ne doivent pas survivre plus longtemps que nécessaire.

Précharger et échanger plusieurs 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 });

Les instances cachées conservent leur état tout en évitant les overlays natifs qui bloquent les touches de l'app.

Intégrez une web app avancée

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

Utilisez ce pattern pour les portails de documents, les flux d'upload, le support, les appels vidéo, les pages Google Pay ou les web apps interactives nécessitant un contrôle natif sans quitter l'app shell.

Référence complète

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

Continuer depuis Utiliser @capgo/capacitor-inappbrowser

Si vous utilisez Utilisation de @capgo/capacitor-inappbrowser pour planifier le travail sur les plugins natifs, connectez-l’à @capgo/capacitor-inappbrowser pour les détails d'implémentation dans @capgo/capacitor-inappbrowser, Prise en main pour les détails d'implémentation dans Getting Started Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans les plugins Capacitor par Capgo, et Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins.