In App Browser

Utilisez @capgo/capacitor-inappbrowser

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

Installez

npm install @capgo/capacitor-inappbrowser
npx cap sync

Ce Qu'expose ce Plugin

• Flux de navigateur système avec Chrome Custom Tabs sur Android et SFSafariViewController sur iOS.
• Vues Web gérées qui peuvent être dimensionnées, cachées, montrées, déplacées derrière l'application Capacitor et ramenées à l'avant.
• Transmission de clics, de touches et de scrolls avec dispatchInputEvent() lorsque l'interface utilisateur de l'application se trouve au-dessus du navigateur.
• Navigateurs à écran partiel où les touches en dehors de la fenêtre native WebView passent à l'application Capacitor sur Android et iOS.
• Nettoyage de cookies, de cache et de données de navigation complète avec persistWebViewData, clearCookies, clearAllCookies, clearCache, et clearAllBrowsingData.
• Communication de l'application vers la page avec postMessage()Communication de la page vers l'application avec window.mobileApp.postMessage(...)et injection de script avec executeScript().
• gestion de téléchargement, règles proxy native d'abord, contrôle de popup, prise en charge de Google Pay, _blank gestion de lien et instances de navigateur préchargées cachées.

Utilisations courantes

Placer l'interface d'application au-dessus d'une navigateur en direct

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 cela pour les couches de paiement, les flux de paiement basés sur un navigateur, les flux de support guidés ou toute fonctionnalité où les contrôles d'Ionic doivent rester au-dessus du contenu web en direct.

Maintenez l'application 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 personnalisé de taille capture uniquement les touches à l'intérieur de son cadre. L'aire visible de l'application 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 cela pour le basculement de compte, les tests de paiement, l'impersonation du support, ou les flux d'authentification où les cookies, la cache, le stockage local et IndexedDB ne doivent pas survivre plus longtemps que nécessaire.

Précharger et échanger plusieurs vues Web

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

Instances cachées conservent leur état disponible tout en évitant les surimpressions natives qui bloquent les touches de l'application.

Intégrer une application Web 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 modèle pour les portails de documents, les flux de téléchargement, les bureaux d'assistance, les appels vidéo, les pages de paiement Google Pay ou les applications web interactives qui nécessitent un contrôle d'applications natives sans quitter la coquille de l'application.

Référence complète

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

Continuez de l'utilisation de @capgo/capacitor-inappbrowser

Si vous utilisez L'utilisation de @capgo/capacitor-inappbrowser pour planifier le travail de plugin natif, connectez-l’avec @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 flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, et Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins.