Utilisez @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser ouvre du contenu web externe à partir d'une application Capacitor. Utilisez open() pour la surface du navigateur de la 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 de popup, un stockage privé ou une interface utilisateur Ionic superposée à la page.

Installer

npm install @capgo/capacitor-inappbrowser
npx cap sync

Ceci que ce plugin expose

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 zone de la Vue Web native passent à l'application Capacitor sur Android et iOS.
Nettoyage de cookies, cache et données de navigation complètes avec persistWebViewData, clearCookies, clearAllCookies, clearCache, et clearAllBrowsingData.
Communication entre l'application et la page avec postMessage()Communication entre la page et l'application avec window.mobileApp.postMessage(...)Injection de script avec executeScript().
Gestion de téléchargements, règles de proxy natives en premier, contrôle des pop-ups, support Google Pay, _blank Gestion des liens et instances de navigateurs préchargées cachées.

Utilisations courantes

Placer l'interface de l'application au-dessus d'un 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 ce modèle pour les surcouche de paiement, les flux de paiement basés sur un navigateur, les flux de support guidés ou toute fonctionnalité où les contrôles Ionic doivent rester au-dessus du contenu web en direct.

Maintenir l'application cliquable autour d'une fenêtre 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é ne capture que 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 ce modèle pour le changement de compte, les tests de paiement, l'impersonation du support, 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 remplacer 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 });

Les instances cachées conservent leur état disponible tout en évitant les surcouche 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 d'upload, les bureaux de support, les appels vidéo, les pages de Google Pay ou les applications web interactives qui nécessitent un contrôle d'application native 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 à partir 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 Prise en main Capgo Répertoire des plugins pour le flux de travail du produit dans le répertoire Capgo Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, et Ajouter ou Mettre à Jour les Plugins pour le détail d'implémentation dans Ajouter ou Mettre à Jour les Plugins.

In App Browser

Tutoriel sur le navigateur intégré