Navegador en la aplicación Complemento de Capacitor

Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser abre contenido web externo desde una aplicación Capacitor open() para la superficie del navegador del plataforma openWebView() when your app needs a managed native WebView with custom size, toolbar, messages, scripts, downloads, proxying, popup control, private storage, or Ionic UI layered above the page.

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

¿Qué Exposiciones Esta Plugin Realiza

• Flujo del navegador del sistema con Chrome Custom Tabs en Android y SFSafariViewController en iOS.
• Vistas web administradas que pueden ser dimensionadas, ocultadas, mostradas, movidas detrás de la aplicación Capacitor y traídas nuevamente a la parte delantera.
• Click, toque y desplazamiento hacia adelante con dispatchInputEvent() Reenvío de clic, toque y desplazamiento con
• Navegadores de pantalla parcial donde los toques fuera del marco de WebView nativo 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().
• Descarga manejo, reglas proxy nativas, control de popup, soporte de Google Pay. _blank , manejo de enlaces, y instancias de navegador 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 });

Utiliza esto para capas de checkout, 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 });

Un navegador personalizado solo captura toques dentro de su marco. El área de la aplicación visible que queda sigue siendo accesible en Android e iOS.

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

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

Siga adelante desde Usando @capgo/capacitor-inappbrowser

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