En utilisant @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser ouvre du contenu web externe à partir d'une Capacitor application. Utilisez open() pour la surface de navigation du navigateur, 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

Ce que ce plugin expose

Flux de navigateur système avec Chrome Custom Tabs sur Android et SFSafariViewController sur iOS.
Des WebViews gérés qui peuvent être dimensionnés, masqués, montrés, déplacés derrière l'application Capacitor et ramenés à l'avant.
Le passage 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 clics en dehors de la zone native WebView passent à l'application Capacitor sur Android et iOS.
Nettoyage complet des cookies, cache et données de navigation 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(...), et injection de script avec executeScript().
Gestion de téléchargements, règles de proxy native en premier, contrôle des pop-up, prise en charge de Google Pay, _blank Gestion des liens et instances de navigateur préchargées cachées.

Utilisations courantes

Placer l'interface utilisateur 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 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 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 });

Ainsi, un navigateur personnalisé ne capte que les touches à l'intérieur de son cadre. La zone visible de l'application reste cliquable sur Android et iOS.

Évitez 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, ou les flux d'authentification où les cookies, la cache, le stockage local et IndexedDB ne devraient pas survivre plus longtemps que nécessaire.

Préchargez et échangez 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égrez 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'application native sans quitter la coquille de l'application.

Référence complète

https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-inappbrowser/ https://github.com/Cap-go/capacitor-inappbrowser/
Continuez à partir de l'utilisation de @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser

https://capgo.com/Cap-go/capacitor-inappbrowser/

Si vous utilisez En utilisant @capgo/capacitor-inappbrowser pour planifier le travail de plugin natif, connectez-le à @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 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 des plugins pour les détails d'implémentation dans l'ajout ou la mise à jour de plugins.

Navigateur intégré

Tutoriel sur le navigateur en application