Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser abre contenido web externo desde una aplicación Capacitor. Utilice open() para la superficie de navegador del plataforma, o openWebView() cuando su aplicación necesita un navegador web nativo gestionado con tamaño personalizado, barra de herramientas, mensajes, scripts, descargas, proxy, control de ventanas emergentes, almacenamiento privado, o interfaz de usuario de Ionic superpuesta sobre la página.

Instalar

npm install @capgo/capacitor-inappbrowser
npx cap sync

¿Qué Esta Plugin Exposa

Flujo del navegador del sistema con Chrome Custom Tabs en Android y SFSafariViewController en iOS.
Navegadores web gestionados que pueden ser tamaño, oculto, mostrado, movido detrás de la aplicación Capacitor y traído nuevamente a la parte delantera.
Hacer clic, tocar y desplazarse hacia adelante con dispatchInputEvent() cuando la interfaz de usuario de la aplicación se encuentra sobre el navegador.
Navegadores de pantalla parcial donde los toques fuera del marco del WebView nativo pasan a la Capacitor app en Android e iOS.
Eliminación de cookies, caché y datos de navegación completos con persistWebViewData, clearCookies, clearAllCookies, clearCache, y clearAllBrowsingData.
Comunicación de la aplicación con postMessage(), comunicación de página con aplicación con window.mobileApp.postMessage(...), y inyección de scripts con executeScript().
Control de descargas, reglas de proxy nativas, control de ventanas emergentes, soporte de Google Pay, _blank Control de enlaces, y instancias de navegadores ocultas pre cargables.

Uso común

Coloca la interfaz de la aplicación por encima de 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 });

Utiliza esto para capas de pago, flujos de pago respaldados por navegador, flujos de soporte guiados, o cualquier característica donde los controles de Ionic necesitan quedarse por encima del contenido web en vivo.

Mantén la aplicación accesible alrededor de una hoja de navegador

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

A un navegador personalizado solo captura toques dentro de su marco. El área de la aplicación visible restante sigue siendo tachable 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 });

Utilice esto para cambiar de cuenta, pruebas de pago, impersonación de soporte, o flujos de autenticación donde cookies, caché, almacenamiento local y IndexedDB no deben sobrevivir más tiempo del necesario.

Pre cargar y cambiar múltiples vistas 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 });

Instancias ocultas mantienen su estado disponible mientras evitan capas nativas que bloquean toques de la aplicación.

Integrar una aplicación web 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' },
});

Utilice este patrón para portales de documentos, flujos de carga, escritorios de soporte, llamadas de video, páginas de pago de Google, o aplicaciones web interactivas que necesitan control de la aplicación nativa sin salir del concha de la aplicación.

Referencia Completa

GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
Documentación: /docs/plugins/inappbrowser/

Sigue adelante desde Usando @capgo/capacitor-inappbrowser

Si estás utilizando Usando @capgo/capacitor-inappbrowser para planificar el trabajo de plugin nativo, conecta con @capgo/capacitor-inappbrowser para obtener detalles de implementación en @capgo/capacitor-inappbrowser, Inicio para obtener detalles de implementación en Inicio, Directorio de Plugins de Capgo para el flujo de trabajo del producto en Directorio de Plugins de Capgo, Plugins de Capacitor por Capgo para obtener detalles de implementación en Plugins de Capacitor por Capgo, y Agregar o Actualizar Plugins para los detalles de implementación en la sección de Agregar o Actualizar Plugins.

Navegador en la aplicación

Tutorial sobre Navegador en Aplicación