En el In App Browser plugin Capacitor

Uso de @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser abre contenido web externo desde una app Capacitor. Usa open() para la superficie del navegador de la plataforma, o openWebView() cuando tu app necesite un WebView nativo gestionado con tamaño, barra de herramientas, mensajes, scripts, descargas, proxy, control de popups, almacenamiento privado o la UI de Ionic sobre la página.

Instalar

npm install @capgo/capacitor-inappbrowser
npx cap sync

Lo que expone este plugin

• Flujo de navegador del sistema con Chrome Custom Tabs en Android y SFSafariViewController en iOS.
• WebViews gestionadas que puedes redimensionar, ocultar, mostrar, mover detrás de la app Capacitor y traer al frente.
• Reenvío de clics, toques y scroll con dispatchInputEvent() when app UI sits above the browser.
• Navegadores de pantalla parcial donde los toques fuera del frame de la WebView nativa pasan a la app Capacitor en Android e iOS.
• Limpieza de cookies, caché y datos de navegación con persistWebViewData, clearCookies, clearAllCookies, clearCache, y clearAllBrowsingData.
• Comunicación de la app a la página con postMessage(), comunicación de la página a la app con window.mobileApp.postMessage(...), e inyección de scripts con executeScript().
• Gestión de descargas, reglas de proxy nativas, control de popups y soporte para Google Pay, _blank gestión de enlaces e instancias de navegador ocultas y precargables.

Casos de uso comunes

UI de la App sobre un navegador en vivo

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 });

Úsalo para overlays de checkout, flujos de pago basados en web, flujos de soporte guiado o cualquier función donde los controles de Ionic deban permanecer sobre el contenido web.

Mantener la App interactiva alrededor de un 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 navegador de tamaño personalizado solo captura toques dentro de su marco. El resto del área visible de la app sigue siendo interactiva en Android e iOS.

Evitar sesiones web persistentes

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

Úsalo para cambio de cuentas, pruebas de checkout, suplantación de soporte o flujos de auth donde las cookies, caché, local storage e IndexedDB no deban durar más de lo necesario.

Precargar y alternar múltiples WebViews

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 });

Las instancias ocultas mantienen su estado disponible evitando overlays nativos que bloqueen los toques de la app.

Integra una Web App avanzada

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' },
});

Usa este patrón para portales de documentos, flujos de upload, centros de soporte, videollamadas, páginas de Google Pay o web apps interactivas que requieran control nativo sin salir de la app.

Referencia completa

• GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
• Docs: /docs/plugins/inappbrowser/

Continúa desde Usando @capgo/capacitor-inappbrowser

Si estás usando Uso de @capgo/capacitor-inappbrowser para planificar el trabajo con plugins nativos, conéctalo con @capgo/capacitor-inappbrowser para los detalles de implementación en @capgo/capacitor-inappbrowser, Primeros pasos para los detalles de implementación en Primeros pasos, Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para los detalles de implementación en Capacitor Plugins de Capgo, y Añadir o actualizar plugins para los detalles de implementación al añadir o actualizar plugins.