Utilisez @capgo/capacitor-inappbrowser

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

Installez

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 On 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 transmission de clics, touches et scrolls 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 complète des cookies, cache et données de navigation avec persistWebViewData, clearCookies, clearAllCookies, clearCache, et clearAllBrowsingData.
La communication entre l'application et la page avec postMessage(), la communication de page à application avec window.mobileApp.postMessage(...), et l'injection de script avec executeScript().
La gestion de téléchargements, les règles de proxy natives en premier, le contrôle des pop-up, le support Google Pay, _blank La gestion des liens, et les instances de navigateurs 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 cela pour les masques de paiement, les flux de support guidés, les flux de paiement basés sur le navigateur ou tout élément où les contrôles d'Ionic doivent rester au-dessus du contenu web en direct.

Conservation de l'applicabilité de l'application 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 cela 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 é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 });

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 d'upload, les bureaux de support, les appels vidéo, les pages de paiement Google 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/
Documents : /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 de plugin 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 la navigation en ligne