Passer à la navigation

@capgo/capacitor-inappbrowser

Navigateur en application natif pour Capacitor avec des vues Web gérées, un niveau d'interface utilisateur natif, des sessions privées, un proxyage, des téléchargements, des pop-ups et des messages d'application.

@capgo/capacitor-inappbrowser fournit aux applications Capacitor deux chemins de navigateur : open() pour l'expérience de navigateur système et openWebView() pour un WebView natif géré qui votre application peut dimensionner, masquer, envoyer des messages, scripter, configurer en proxy et superposer avec l'interface utilisateur d'Ionic.

Utilisez-le lorsque la page nécessite plus qu'un simple navigateur externe : les flux OAuth et de paiement, les portails d'assistance intégrés, les écrans de paiement, les appels vidéo, les portails de documents, les applications web interactives ou tout flux où votre application nécessite des contrôles natifs autour du contenu web en direct.

Le nom du package a changé.
  • Présentez l'interface utilisateur d'Ionic ou Capacitor au-dessus d'une page de navigateur en direct avec toBack, sendToBack(), bringToFront(), transparentBackground, et dispatchInputEvent().
  • Construirez des navigateurs à écran partiel, des feuilles de bas et des vues web en mode image dans l'image avec width, height, x, y, et updateDimensions().
  • Permettre aux utilisateurs de cliquer sur l'application Capacitor en dehors d'une fenêtre de navigateur personnalisée sur Android et iOS.
  • Exécuter des flux de paiement, de connexion, de support ou de basculement de compte sans stockage de site persistant en utilisant persistWebViewData: false et clearAllBrowsingData().
  • Maintenir plusieurs instances de navigateur chargées avec hidden, hide(), et show() en conservant l'état de la page.
  • Intégrer des applications web avancées nécessitant la mise en cache de requêtes, les téléchargements de fichiers, les contrôles de popup, le support de Google Pay, _blank la gestion des liens et la messagerie application-page.
  • open - Ouvre une URL dans les onglets personnalisés de Chrome sur Android ou SFSafariViewController sur iOS.
  • openWebView - Ouvre une vue Web native gérée avec une barre d'outils personnalisée, une taille, une navigation native, des messages, du scripting, un proxy, des téléchargements, des pop-ups et des contrôles de données.
  • sendToBack / bringToFront - Déplace une fenêtre de navigateur gérée derrière ou au-dessus de la Capacitor vue Web hôte.
  • dispatchInputEvent - Transfère les événements de clic, de toucher et de scroll vers une fenêtre de navigateur qui se trouve derrière l'interface utilisateur native de l'application.
  • updateDimensions - Modifie la taille et la position de la vue Web gérée sans recharger la page.
  • hide / show - Garde les vues Web gérées chargées tout en supprimant ou en restaurant leur présentation native.
  • postMessage / executeScript - Connecte l'application Capacitor avec le JavaScript exécuté à l'intérieur de la page gérée.
  • clearAllBrowsingData / persistWebViewData - Contrôle la persistance des cookies, de la cache, de la storage, de l'IndexedDB et de la session.
  • handleDownloads, les règles de proxy et les événements de pop-up - Supporte les portails de documents, les flux de téléchargement, les pages de paiement et les applications Web intégrées.

Application API publique

Section intitulée “Public API”
MéthodeDescription
goBackRetourne en arrière dans l'historique de la vue WebView si possible.
openOuvre l'URL dans une nouvelle fenêtre en plein écran, sur Android, il utilise les onglets personnalisés de Chrome, sur iOS, il utilise SFSafariViewController.
clearCookiesEfface les cookies de l'URL Lorsque id s'il est omis, s'applique à tous les webviews ouverts.
clearAllCookiesEfface tous les cookies Lorsque id s'il est omis, s'applique à tous les webviews ouverts.
clearCacheEfface le cache Lorsque id s'il est omis, s'applique à tous les webviews ouverts.
clearAllBrowsingDataEfface les cookies, le cache, le stockage local, le stockage de session, IndexedDB et autres données de navigation du magasin par défaut et des WebViews gérés.
getCookiesObtenez les cookies pour une URL spécifique.
closeFermer la vue web. Lorsque id est omis, ferme la vue web active.
hideCacher la vue web sans la fermer. Utilisez show() pour la faire réapparaître. Lorsque id est omis, cible la vue web active.
showAfficher une vue web précédemment cachée. Lorsque id est omis, cible la vue web active.
sendToBackPlace le navigateur natif derrière la Capacitor vue WebView pour que l'interface utilisateur de l'application apparaisse au-dessus.
bringToFrontPlace un navigateur qui était derrière la vue WebView en avant.
dispatchInputEventEnvoie un clic, un toucher ou un défilement d'entrée à un navigateur géré ; les coordonnées sont relatives à la vue de navigateur.
openWebViewOuvrez l'URL dans une nouvelle vue web avec des barres d'outils et des capacités améliorées, comme l'accès à la caméra, l'accès aux fichiers, l'écoute d'événements, l'injection de JavaScript, la communication bidirectionnelle, etc.
executeScriptInjecte le JavaScript code dans la fenêtre InAppBrowser. Lorsque id est omis, exécute dans toutes les fenêtres web ouvertes.
postMessageEnvoie un événement à la fenêtre web (navigateur intégré dans l'application). Écoutez dans la page avec window.addEventListener('messageFromNative', listenerFunc) La detail Le id payload doit être sérialisable en JSON. Lorsque
takeScreenshotest omis, diffuse vers toutes les fenêtres web ouvertes. id Capte la zone de vue actuelle de la fenêtre web sous forme d'écran PNG. Lorsque
setUrlest omis, cible la fenêtre web active. id Fixe l'URL de la fenêtre web. Lorsque
addListenerest omis, cible la fenêtre web active.
addListenerÉcoutez pour le changement d'URL, uniquement pour la fenêtre web ouverte. buttonNearDoneClickÉcoutez pour le changement de la fenêtre web ; le payload contient la fenêtre web id.
addListenerÉcoutez uniquement le clic de fermeture pour openWebView.
addListenerSera déclenché lorsque l'utilisateur clique sur le bouton de confirmation lorsque la mention légale est requise, fonctionne avec openWebView shareDisclaimer et closeModal.
addListenerS'active lorsque la vue web envoie un événement vers l'application. Utilisez window.mobileApp.postMessage(...) dans la page, et gardez le payload JSON-serialisable.
addListenerSera déclenché chaque fois qu'un écran d'écriture est capturé à partir du plugin API, le bouton de capture d'écran natif ou le pont JavaScript injecté.
addListenerSera déclenché lorsque la page est chargée.
addListenerSera déclenché lorsque l'erreur de chargement de la page se produit.
addListenerSera déclenché après que le téléchargement natif a enregistré un fichier localement. Activez cela avec handleDownloads: true lorsque vous ouvrez la vue web.
addListenerSera déclenché lorsque le téléchargement natif échoue. Activez cela avec handleDownloads: true lorsque vous ouvrez la vue web.
addListenerSera déclenché chaque fois qu'une page ouvre une nouvelle fenêtre. Utilisez l'ID de la fenêtre popup retourné avec executeScript, postMessage, show, hide, et close.
addListenerEcoutez les requêtes proxy déléguées par le runtime natif. Préférez addProxyHandler() au lieu d'appeler cela directement.
addListenerEcoutez la sortie de la console JavaScript émise par la page gérée. Activez cela avec captureConsoleLogs: true lorsque vous ouvrez la vue web.
handleProxyRequestMéthode interne utilisée par addProxyHandler() pour envoyer une décision de proxy vers le natif. Faites passer l'original phase lorsque vous répondez à un écouteur manuel. proxyRequest Supprimez tous les écouteurs pour ce plugin.
removeAllListenersRechargez la page web actuelle.
reloadMettez à jour les dimensions de la vue web. Permet de changer la taille et la position de la vue web en temps de exécution. Lorsque
updateDimensionslorsque id est omis, cible le webview actif.
setEnabledSafeTopMarginFixe la marge supérieure en sécurité active du webview en temps de exécution. Lorsque id est omis, cible le webview actif. Sur le Web, cette méthode est une opération sans effet et se résout sans modifier la disposition.
setEnabledSafeBottomMarginFixe la marge inférieure en sécurité active du webview en temps de exécution. Lorsque id est omis, cible le webview actif. Sur le Web, cette méthode est une opération sans effet et se résout sans modifier la disposition.
openSecureWindowOuvre une fenêtre OAuth2 sécurisée. Sur le Web, renvoie l'URL redirigée à travers un BroadcastChannel ; sur les appareils mobiles, enregistrez une URI de redirection personnalisée dans la configuration de votre application. Consultez le guide de démarrage rapide pour les exemples complets d'HTML, Info.plist et AndroidManifest.

Utilisez ces valeurs avec les options de la barre d'outils lors de l'ouverture d'un navigateur intégré ou d'un WebView.

ValeurL'utilisateur trouvera
activityBarre d'outils simple avec contrôles de fermeture et de partage.
compactBarre d'outils simple avec un contrôle de fermeture.
navigationBarre d'outils de navigation complète avec contrôles de retour en arrière et d'avance.
blankAucune barre d'outils.

Cette référence est synchronisée à partir de src/definitions.ts dans capacitor-inappbrowser.

Continuez à partir de @capgo/capacitor-inappbrowser

Section intitulée « Continuer à partir de @capgo/capacitor-inappbrowser »

Si vous utilisez @capgo/capacitor-inappbrowser pour planifier le travail de plugin natif, connectez-le avec Utilisez @capgo/capacitor-inappbrowser pour la capacité native dans Utilisez @capgo/capacitor-inappbrowser, Répertoire de plugin Capgo pour le flux de travail du produit dans Répertoire de plugin Capgo, Plugins Capacitor par Capgo pour le détail d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou Mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou Mettre à jour les plugins, et Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives de plugins d'entreprise Ionic.