Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser abre contenido web externo desde una aplicación Capacitor. Utilice open() para la superficie del navegador del dispositivo móvil, o openWebView() cuando su aplicación necesita un navegador 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é Exposición de este Complemento?

Flujo del navegador del sistema con Chrome Custom Tabs en Android y SFSafariViewController en iOS.
Vistas web administradas que se pueden dimensionar, ocultar, mostrar, mover detrás de la aplicación Capacitor y traer nuevamente a la parte delantera.
Reenvío de clic, toque y desplazamiento con dispatchInputEvent() Cuando la interfaz de usuario de la aplicación se encuentra encima del navegador.
Navegadores de pantalla parcial donde los toques fuera de la ventana del marco de la vista nativa WebView pasan a la aplicación Capacitor 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 aplicación a página con postMessage()Comunicación de página a aplicación con window.mobileApp.postMessage(...)y inyección de scripts con executeScript().
Gestión de descargas, reglas de proxy nativas primero, control de pestañas, soporte de Google Pay _blank Gestión de enlaces, y instancias de navegadores ocultas y 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 checkout, flujos de pago respaldados por navegador, flujos de soporte guiados o cualquier característica donde los controles de Iónico necesitan permanecer por encima del contenido web en vivo.

Mantén la aplicación clickeable alrededor de una hoja de navegador personalizada

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

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

Una ventana del navegador de tamaño personalizado solo captura toques dentro de su marco. El área de la aplicación visible que queda sigue siendo tachable en Android e iOS.

Evita sesiones web persistentes

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

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

Utiliza 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.

Carga previa y intercambio de múltiples WebView

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.

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

Utiliza 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/

Continúa 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 Iniciar sesión para obtener detalles de implementación en Iniciar sesión Capgo Directorio de Plugins para el flujo de trabajo del producto en el directorio de plugins Capgo Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, y Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins.

Navegador de aplicaciones

Tutoriales sobre el navegador en aplicaciones