Navegador en la aplicación plugin de Capacitor

Usando @capgo/capacitor-inappbrowser

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

Instalar

npm install @capgo/capacitor-inappbrowser
npx cap sync

¿Qué expone este plugin?

• 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.
• Click, toque y desplazamiento hacia adelante con dispatchInputEvent() when app UI sits above the browser.
• Navegadores de pantalla parcial donde los toques fuera del marco de WebView nativo pasan a la aplicación Capacitor en Android e iOS.
• Limpieza completa de cookies, caché y datos de navegación persistWebViewData, clearCookies, clearAllCookies, clearCache, and clearAllBrowsingData.
• Comunicación de página a aplicación con postMessage()comunicación de página a aplicación window.mobileApp.postMessage(...)y la inyección de scripts con executeScript().
• Descarga manejada, reglas proxy nativas, control de popup, soporte de Google Pay. _blank manejo de enlaces, y instancias de navegadores ocultas pre cargables.

Common Use Cases

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

Utilice esto para overlays de pago, flujos de pago respaldados por el navegador, flujos de soporte guiados o cualquier característica donde los controles de Ionic necesiten permanecer sobre contenido web en vivo.

Mantén la Aplicación Accionable 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 });

Un navegador personalizado de tamaño ajustado solo captura toques dentro de su marco. El área visible del aplicativo restante 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, e IndexedDB no deben sobrevivir más tiempo del necesario.

Carga previamente y intercambia 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 sobreposiciones nativas que bloquean toques de la aplicación.

Insertar 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 aplicaciones nativas sin salir del concha de la aplicación.

Referencia Completa

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

Siga adelante desde Usando @capgo/capacitor-inappbrowser

Si está utilizando Usando @capgo/capacitor-inappbrowser para planificar el trabajo de plugin nativo, conecte con @capgo/capacitor-inappbrowser para los detalles de implementación en @capgo/capacitor-inappbrowser Configuración Inicial para los detalles de implementación en Configuración Inicial Directorio del Plugin Capgo para el flujo de trabajo del producto en Directorio del Plugin Capgo Plugins de Capgo en Capacitor para los detalles de implementación en Plugins de Capgo en Capacitor, y Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins.