@capgo/capacitor-inappbrowser

Aperçu

@capgo/capacitor-inappbrowser offre à Capacitor apps deux chemins de navigateur : open() pour l'expérience du navigateur système et openWebView() pour une WebView native gérée que votre application peut redimensionner, masquer, piloter par messages, scripter, proxifier et superposer à l'interface Ionic.

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

Le nom du package a été modifié.

Cas d'usage courants

• Présentez l'interface Ionic ou Capacitor au-dessus d'une page web en direct avec toBack, sendToBack(), bringToFront(), transparentBackground, et dispatchInputEvent().
• Créez des navigateurs en écran partiel, des bottom sheets et des webviews en picture-in-picture avec width, height, x, y, et updateDimensions().
• Let users tap the Capacitor app outside a custom-size browser frame on Android and iOS.
• Exécutez des flux de paiement, de connexion, de support ou de changement de compte sans stockage web persistant avec persistWebViewData: false et clearAllBrowsingData().
• Maintenez plusieurs instances de navigateur chargées avec hidden, hide(), et show() tout en préservant l'état de la page.
• Intégrez des web apps avancées nécessitant un proxy de requête, des uploads de fichiers, des téléchargements, le contrôle des popups, le support de Google Pay, _blank la gestion des liens et la communication app-vers-page.

Fonctionnalités clés

• open - Ouvre une URL dans Chrome Custom Tabs sur Android ou SFSafariViewController sur iOS.
• openWebView - Ouvre une WebView native gérée avec barre d'outils personnalisée, redimensionnement, navigation native, messagerie, scripting, proxy, téléchargements, popups et contrôles de données.
• sendToBack / bringToFront - Déplace un navigateur géré derrière ou au-dessus de la WebView hôte Capacitor.
• dispatchInputEvent - Transmet les événements de clic, de toucher et de défilement à un navigateur situé derrière l'interface native de l'app.
• updateDimensions - Modifie la taille et la position de la WebView gérée sans recharger la page.
• hide / show - Maintient les WebViews gérées chargées tout en supprimant ou en restaurant leur présentation native.
• postMessage / executeScript - Connecte l'app Capacitor au JavaScript s'exécutant à l'intérieur de la page gérée.
• clearAllBrowsingData / persistWebViewData - Contrôle les cookies, le cache, le stockage, IndexedDB et la persistance de session.
• handleDownloads, les règles de proxy et les événements popup — Gérez les portails de support, les flux d'upload, les pages de paiement et les web apps intégrées.

API public

Méthode	Description
goBack	Navigue dans l'historique de la WebView si possible.
open	Ouvrir l'URL dans une nouvelle fenêtre plein écran. Sur Android, s'appuie sur Chrome Custom Tabs ; sur iOS, sur SFSafariViewController.
clearCookies	Effacer les cookies de l'URL quand id est omis, s'applique à toutes les webviews ouvertes.
clearAllCookies	Effacer tous les cookies quand id est omis, s'applique à toutes les webviews ouvertes.
clearCache	Effacer le cache quand id est omis, s'applique à toutes les webviews ouvertes.
clearAllBrowsingData	Efface les cookies, le cache, le local storage, le session storage, IndexedDB et les autres données de navigation du store par défaut et des WebViews gérées.
getCookies	Récupérer les cookies d'une URL spécifique.
close	Fermer la webview. Quand id est omis, ferme la webview active.
hide	Masquer la webview sans la fermer. Utilisez show() pour la réafficher. Quand id est omis, cible la webview active.
show	Affiche une webview précédemment masquée. Quand id est omis, cible la webview active.
sendToBack	Déplace le navigateur natif derrière la WebView hôte Capacitor pour que l'UI de l'app puisse apparaître au-dessus.
bringToFront	Ramène au premier plan un navigateur qui se trouvait derrière la WebView hôte.
dispatchInputEvent	Envoie les entrées de clic, de toucher ou de défilement à un navigateur géré ; les coordonnées sont relatives à la fenêtre du navigateur.
openWebView	Ouvrir une URL dans une nouvelle webview avec barres d'outils et fonctionnalités avancées : accès à la caméra, accès aux fichiers, écoute d'événements, injection de JavaScript, communication bidirectionnelle, etc.
executeScript	Injecte le JavaScript code dans la fenêtre de l'InAppBrowser. Quand id est omis, s'exécute dans toutes les webviews ouvertes.
postMessage	Envoie un événement à la webview (navigateur in-app). Écoutez dans la page avec window.addEventListener('messageFromNative', listenerFunc). Le detail le payload doit être sérialisable en JSON. Quand id est omis, diffuse vers toutes les webviews ouvertes.
takeScreenshot	Capture le viewport actuel de la webview en capture d'écran PNG. Quand id est omis, cible la webview active.
setUrl	Définit l'URL de la webview. Quand id est omis, cible la webview active.
addListener	Écoutez les changements d'URL, uniquement pour openWebView.
addListener	Écoutez buttonNearDoneClick; le payload contient la webview id.
addListener	Écoutez les clics de fermeture uniquement pour openWebView.
addListener	Sera déclenché lorsque l'utilisateur clique sur le bouton de confirmation si un disclaimer est requis ; fonctionne avec openWebView shareDisclaimer et closeModal.
addListener	Se déclenche quand la webview renvoie un événement à l'app. Utilisez window.mobileApp.postMessage(...) dans la page, et gardez le payload sérialisable en JSON.
addListener	Sera déclenché dès qu'une capture d'écran est effectuée via le plugin API, le bouton de capture natif ou le bridge JavaScript injecté.
addListener	Sera déclenché lors du chargement de la page.
addListener	Sera déclenché en cas d'erreur de chargement de la page.
addListener	Sera déclenché après que la gestion du téléchargement natif a sauvegardé un fichier localement. Activez ceci avec handleDownloads: true lors de l'ouverture de la webview.
addListener	Sera déclenché si la gestion du téléchargement natif échoue. Activez ceci avec handleDownloads: true lors de l'ouverture de la webview.
addListener	Sera déclenché dès qu'une page ouvre un popup ou une nouvelle fenêtre. Utilisez l'ID du popup retourné avec executeScript, postMessage, show, hide, et close.
addListener	Écoutez les requêtes proxy déléguées par le runtime natif. Privilégiez addProxyHandler() au lieu de l'appeler directement.
addListener	Écoutez les sorties de la console JavaScript émises par la page gérée. Activez ceci avec captureConsoleLogs: true lors de l'ouverture de la webview.
handleProxyRequest	Méthode interne utilisée par addProxyHandler() pour renvoyer une décision de proxy au natif. Transférer l'original phase lors de la réponse à un proxyRequest listener.
removeAllListeners	Supprimez tous les écouteurs de ce plugin.
reload	Recharger la page web actuelle.
updateDimensions	Mettre à jour les dimensions de la webview. Permet de modifier la taille et la position de la webview au runtime. Quand id est omis, cible la webview active.
setEnabledSafeTopMargin	Définit la marge de sécurité supérieure activée de la webview au runtime. Quand id est omis, cible la webview active. Sur le Web, cette méthode est une no-op et se résout sans changer la mise en page.
setEnabledSafeBottomMargin	Définit la marge de sécurité inférieure activée de la webview au runtime. Quand id est omis, cible la webview active. Sur le web, cette méthode ne fait rien et se résout sans modifier la mise en page.
openSecureWindow	Ouvre une fenêtre OAuth2 sécurisée. Sur le web, renvoyez l'URL de redirection via un BroadcastChannel; sur mobile, enregistrez une URI de redirection personnalisée dans la configuration de votre application. Consultez le guide de démarrage pour les exemples complets HTML, Info.plist et AndroidManifest.

Valeurs de référence

Utilisez ces valeurs avec les options de la barre d'outils lors de l'ouverture d'un in-app browser ou d'une WebView.

Types de barre d'outils

Valeur	L'utilisateur trouvera
activity	Barre d'outils simple avec contrôles de fermeture et de partage.
compact	Barre d'outils simple avec contrôle de fermeture.
navigation	Barre de navigation complète avec contrôles de retour et d'avance.
blank	No toolbar.

Source de vérité

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

Continuer depuis @capgo/capacitor-inappbrowser

Si vous utilisez @capgo/capacitor-inappbrowser pour planifier le travail sur les plugins natifs, connectez-l’à Utilisation de @capgo/capacitor-inappbrowser pour la fonctionnalité native dans « Utiliser @capgo/capacitor-inappbrowser », Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Ajout ou mise à jour de plugins, et Alternatives aux plugins Ionic Enterprise pour le workflow produit dans Alternatives aux plugins Ionic Enterprise.