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 des pop-ups, 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.
Les 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.
La navigation par clic, toucher et défilement avec dispatchInputEvent() lorsque l'interface utilisateur de l'application se trouve au-dessus du navigateur.
Les navigateurs à écran partiel où les touches en dehors de la zone de la vue Web native passent à l'application Capacitor sur Android et iOS.
La suppression des cookies, cache et données de navigation complètes avec persistWebViewData, clearCookies, clearAllCookies, clearCache, et clearAllBrowsingData.
La communication entre l'application et la page avec postMessage()La communication entre la page et l'application avec window.mobileApp.postMessage(...), et l'injection de script avec executeScript().
La gestion des téléchargements, les règles de proxy natives en premier, le contrôle des pop-up, le support de Google Pay, _blank La gestion des liens et les instances de navigateur cachées préchargé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 masques 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, 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 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 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 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-le avec @capgo/capacitor-inappbrowser pour les détails d'implémentation dans @capgo/capacitor-inappbrowser Démarrage pour les détails d'implémentation dans Démarrage Capgo Répertoire des plugins pour le flux de travail du produit dans le répertoire Capgo des plugins 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 en application