@capgo/capacitor-inappbrowser

Resumen

@capgo/capacitor-inappbrowser ofrece a las apps Capacitor dos rutas de navegador: open() para la experiencia del navegador del sistema y openWebView() para un WebView nativo gestionado que tu app puede redimensionar, ocultar, comunicar, ejecutar scripts, usar como proxy y superponer con la UI de Ionic.

Úsalo cuando la página requiera algo más que un simple navegador externo: flujos de OAuth y checkout, portales de soporte integrados, pantallas de pago, videollamadas, portales de documentos, web apps interactivas o cualquier flujo donde tu app necesite controles nativos sobre contenido web en vivo.

El nombre del paquete ha cambiado.

Casos de uso comunes

• Presenta la UI de Ionic o Capacitor sobre una página de navegador en vivo con toBack, sendToBack(), bringToFront(), transparentBackground, y dispatchInputEvent().
• Crea navegadores de pantalla parcial, bottom sheets y webviews picture-in-picture con width, height, x, y, y updateDimensions().
• Permite que los usuarios toquen la app Capacitor fuera de un frame de navegador de tamaño personalizado en Android e iOS.
• Ejecuta flujos de checkout, login, soporte o cambio de cuenta sin almacenamiento persistente usando persistWebViewData: false y clearAllBrowsingData().
• Mantén múltiples instancias del navegador cargadas con hidden, hide(), y show() mientras preservas el estado de la página.
• Incrusta web apps avanzadas que requieran proxy de peticiones, upload de archivos, downloads, control de popups, soporte para Google Pay, _blank gestión de links y mensajería entre la app y la página.

Funcionalidades principales

• open - Abre una URL en Chrome Custom Tabs en Android o SFSafariViewController en iOS.
• openWebView - Abre un WebView nativo gestionado con toolbar personalizada, dimensiones, navegación nativa, mensajería, scripting, proxy, downloads, popups y controles de datos.
• sendToBack / bringToFront - Mueve un navegador gestionado detrás o encima de la WebView host de Capacitor.
• dispatchInputEvent - Reenvía eventos de click, touch y scroll a un navegador situado detrás de la UI nativa.
• updateDimensions - Cambia el tamaño y la posición de la WebView gestionada sin recargar la página.
• hide / show - Mantiene las WebViews gestionadas cargadas mientras se oculta o restaura su presentación nativa.
• postMessage / executeScript - Conecta la app Capacitor con el JavaScript que se ejecuta dentro de la página gestionada.
• clearAllBrowsingData / persistWebViewData - Controla cookies, caché, storage, IndexedDB y la persistencia de sesión.
• handleDownloads, reglas de proxy y eventos de popup - Soporta portales de documentos, flujos de upload, páginas de pago y web apps embebidas.

Público API

Método	Descripción
goBack	Navega hacia atrás en el historial del WebView si es posible.
open	Abre una URL en una nueva ventana a pantalla completa; en Android usa Chrome Custom Tabs y en iOS usa SFSafariViewController.
clearCookies	Limpiar cookies de la URL cuando id se omite, se aplica a todas las webviews abiertas.
clearAllCookies	Limpiar todas las cookies cuando id se omite, se aplica a todas las webviews abiertas.
clearCache	Limpiar caché cuando id se omite, se aplica a todas las webviews abiertas.
clearAllBrowsingData	Elimina cookies, caché, local storage, session storage, IndexedDB y otros datos de navegación del almacén predeterminado y de las WebViews gestionadas.
getCookies	Obtiene las cookies de una URL específica.
close	Cerrar la webview. Cuando id se omite, cierra la webview activa.
hide	Ocultar la webview sin cerrarla. Usa show() para volver a mostrarla. Cuando id se omite, apunta a la webview activa.
show	Muestra una webview que estaba oculta. Cuando id se omite, apunta a la webview activa.
sendToBack	Mueve el navegador nativo detrás de la WebView host de Capacitor para que la UI de la app pueda aparecer encima.
bringToFront	Trae al frente un navegador que estaba detrás de la WebView host.
dispatchInputEvent	Envía inputs de click, touch o scroll a un navegador gestionado; las coordenadas son relativas al viewport del navegador.
openWebView	Abre una URL en una nueva webview con barras de herramientas y funciones avanzadas, como acceso a la cámara y archivos, escucha de eventos, inyección de javascript, comunicación bidireccional, etc.
executeScript	Inyecta JavaScript code en la ventana de InAppBrowser. Cuando id se omite, se ejecuta en todas las webviews abiertas.
postMessage	Envía un evento a la webview (in-app browser). Escúchalo en la página con window.addEventListener('messageFromNative', listenerFunc). El detail payload debe ser serializable en JSON. Cuando id si se omite, se transmite a todas las webviews abiertas.
takeScreenshot	Captura el viewport actual de la webview como una captura de pantalla PNG. Cuando id se omite, apunta a la webview activa.
setUrl	Establece la URL de la webview. Cuando id se omite, apunta a la webview activa.
addListener	Escucha cambios de URL, solo para openWebView.
addListener	Escucha buttonNearDoneClick; el payload contiene la webview id.
addListener	Escucha el clic de cierre solo para openWebView.
addListener	Se activará cuando el usuario haga clic en el botón de confirmación al requerirse un disclaimer; funciona con openWebView, shareDisclaimer y closeModal.
addListener	Se dispara cuando la webview envía un evento de vuelta a la app. Usa window.mobileApp.postMessage(...) en la página, y asegúrate de que el payload sea serializable en JSON.
addListener	Se activará cada vez que se capture una captura de pantalla desde el plugin API, el botón nativo o el bridge de JavaScript inyectado.
addListener	Se activará cuando se cargue la página.
addListener	Se activará cuando ocurra un error al cargar la página.
addListener	Se activará después de que el manejo de descargas nativo guarde un archivo localmente. Actívalo con handleDownloads: true al abrir la webview.
addListener	Se activará cuando falle el manejo de descargas nativo. Actívalo con handleDownloads: true al abrir la webview.
addListener	Se activará cada vez que una página abra un popup o ventana nueva. Usa el popup id devuelto con executeScript, postMessage, show, hide, y close.
addListener	Escucha las peticiones proxy delegadas por el runtime nativo. Es preferible usar addProxyHandler() en lugar de llamar a esto directamente.
addListener	Escucha la salida de la consola de JavaScript emitida por la página gestionada. Actívalo con captureConsoleLogs: true al abrir la webview.
handleProxyRequest	Método interno utilizado por addProxyHandler() para enviar una decisión de proxy al nativo. Reenvía el original phase al responder a un manual proxyRequest listener manual.
removeAllListeners	Elimina todos los listeners de este plugin.
reload	Recarga la página web actual.
updateDimensions	Actualiza las dimensiones de la webview. Permite cambiar el tamaño y la posición de la webview en tiempo de ejecución. Cuando id se omite, apunta a la webview activa.
setEnabledSafeTopMargin	Establece el margen superior seguro habilitado de la webview en tiempo de ejecución. Cuando id se omite, apunta a la webview activa. En Web, este método no hace nada y se resuelve sin cambiar el layout.
setEnabledSafeBottomMargin	Establece el margen inferior seguro habilitado de la webview en tiempo de ejecución. Cuando id se omite, apunta a la webview activa. En Web, este método no hace nada y se resuelve sin cambiar el layout.
openSecureWindow	Abre una ventana OAuth2 segura. En la web, devuelve la URL de redirección mediante un BroadcastChannel; en móvil, registra una URI de redirección personalizada en la configuración de tu app. Consulta la guía de inicio para ver ejemplos de HTML, Info.plist y AndroidManifest.

Valores de referencia

Usa estos valores con las opciones de la toolbar al abrir un in-app browser o WebView.

Tipos de toolbar

Valor	El usuario encontrará
activity	Toolbar sencilla con controles de cierre y compartir.
compact	Toolbar sencilla con control de cierre.
navigation	Barra de navegación completa con controles de retroceso y avance.
blank	No toolbar.

Fuente de verdad

Esta referencia se sincroniza desde src/definitions.ts en capacitor-inappbrowser.

Continuar desde @capgo/capacitor-inappbrowser

Si estás usando @capgo/capacitor-inappbrowser para planificar el trabajo con plugins nativos, conéctalo con Uso de @capgo/capacitor-inappbrowser para la capacidad nativa en Uso de @capgo/capacitor-inappbrowser, Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, y Alternativas a plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas a plugins de Ionic Enterprise.