Navigateur Intérieur plugin Capacitor

En utilisant @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser ouvre du contenu web externe à partir d'une application Capacitor. open() pour la surface du navigateur du plateforme openWebView() when your app needs a managed native WebView with custom size, toolbar, messages, scripts, downloads, proxying, popup control, private storage, or Ionic UI layered above the page.

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

Qu'est-ce que ce Plugin Expose

• Flux de navigateur système avec Chrome Custom Tabs sur Android et SFSafariViewController sur iOS.
• Fenêtres 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.
• Cliquez, touchez et faites glisser en avant dispatchInputEvent() Transmission de clics, de touches et de scrolls avec
• Navigateurs à écran partiel où les clics en dehors de la fenêtre native WebView 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 postMessage(), communication entre page et 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, support Google Pay. _blank Gestion de liens, et instances de navigateur préchargées cachées.

Utilisations courantes

Placer l'interface d'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 fenêtres de paiement basées sur le navigateur, les flux de support guidés ou tout élément où les contrôles d'Ionic doivent rester au-dessus du contenu web en direct.

Keep the App Clickable Around a Browser Sheet

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 capte que les touches à l'intérieur de son cadre. L'aire 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 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 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/
• Docs : /docs/plugins/inappbrowser/

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

Si vous utilisez En utilisant @capgo/capacitor-inappbrowser pour planifier le travail du plugin natif, le connecter avec à @capgo/capacitor-inappbrowser pour les détails d'implémentation dans @capgo/capacitor-inappbrowser Getting Started pour les détails d'implémentation dans Démarrage Répertoire des plugins Capgo pour le flux de travail du produit dans Répertoire des plugins Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, et Ajouter ou Mettre à jour les plugins pour les détails d'implémentation dans Ajouter ou Mettre à jour les plugins.