Getting Started
Copie un prompt de configuración con los pasos de instalación y la guía de markdown completa para este plugin.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-webview-crash`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/webview-crash/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Instalar
Sección titulada “Instalar”Puedes utilizar nuestra configuración asistida por IA para instalar el plugin. Agrega las Capgo habilidades a tu herramienta de IA utilizando el siguiente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLuego utiliza el siguiente prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-webview-crash` plugin in my project.If prefieres la configuración manual, instala el plugin ejecutando los siguientes comandos y sigue las instrucciones específicas de la plataforma a continuación:
npm install @capgo/capacitor-webview-crashnpx cap syncImportar
Sección titulada “Importar”import { WebViewCrash } from '@capgo/capacitor-webview-crash';Flujo de recuperación recomendado
Sección titulada “Flujo de recuperación recomendado”Adjunta los listeners lo antes posible en el arranque de tu aplicación para que el runtime recuperado pueda reaccionar antes de que los usuarios continúen navegando:
import { WebViewCrash } from '@capgo/capacitor-webview-crash';
await WebViewCrash.addListener('webViewRestoredAfterCrash', async (info) => { console.log('Recovered after a WebView crash', info);
// Rehydrate critical state, reopen the correct screen, or prompt the user to retry. await WebViewCrash.clearPendingCrashInfo();});
await WebViewCrash.addListener('webViewRestoredAfterRestart', async (info) => { console.log('Recovered after a native WebView restart', info); await WebViewCrash.clearPendingCrashInfo();});
const pending = await WebViewCrash.getPendingCrashInfo();// Note: the listener callback may have already cleared the pending marker.if (pending.value) { console.log('Pending crash or restart marker', pending.value);}Reinicio automático nativo
Sección titulada “Reinicio automático nativo”Establecer opciones de reinicio en capacitor.config.ts para que la decisión permanezca en code nativo incluso cuando el tiempo de ejecución de JavaScript se ha caído o no se ha cargado aún:
import type { CapacitorConfig } from '@capacitor/cli';import type { WebViewCrashPluginConfig } from '@capgo/capacitor-webview-crash';
const webViewCrash: WebViewCrashPluginConfig = { // Enabled by default. Keep this on for long-running apps. restartOnCrash: true,
// Use a 5-field cron schedule in the device local timezone. // Do not combine restartCron with an active restartIntervalMs. restartCron: '0 3 * * *',
// Optional delay before restarting after a crash. restartAfterCrashDelayMs: 0,};
const config: CapacitorConfig = { plugins: { WebViewCrash: webViewCrash, },};
export default config;Usar restartIntervalMs para aplicaciones siempre encendidas donde los usuarios pueden mantener la misma vista de WebView abierta durante días: pantallas de kiosk, tableros de control, escáneres de almacén, terminales de caja, tabletas de flota y señalización digital. Usar restartCron para reinicios de reloj de pared como 0 3 * * * para un reinicio diario a las 03:00 en la zona horaria local del dispositivo. Los reinicios programados escriben un marcador pendiente con reason: 'periodicRestart', luego Android recrea la actividad de host y iOS reconstruye la vista de puente Capacitor para crear un nuevo WKWebView is created from native code.
admite restartCron , listas, rangos y pasos. No configures ambos horarios al mismo tiempo: la inicialización nativa lanza un error de configuración fatal cuando *__CAPGO_KEEP_0__ restartCron está configurado y restartIntervalMs es mayor que 0. Un reinicio crea un entorno de tiempo de ejecución de JavaScript fresco, por lo que persista los eventos programados, el estado de formulario no guardado y el estado de navegación actual antes de usar horarios agresivos.
Reinicio nativo manual
Título de la sección “Reinicio nativo manual”Llamar restartWebView() cuando el entorno de tiempo de ejecución de JavaScript actual decide que el WebView nativo debe ser reemplazado de manera proactiva, por ejemplo después de un flujo de trabajo pesado en memoria o antes de entrar en una sesión inatendida larga:
await WebViewCrash.restartWebView();El método escribe un marcador pendiente con reason: 'manualRestart', resuelve la llamada actual, luego pregunta a code nativo que cree un WebView fresco. Android recrea la actividad de host. iOS reconstruye la vista de puente Capacitor para que en su lugar se cree un WKWebView es creado en lugar de recargar la página actual.
Resumen de API
Sección titulada “API overview”getPendingCrashInfo
Sección titulada “getPendingCrashInfo”Devuelve el marcador de crash o reinicio nativo almacenado, o null cuando no hay nada pendiente.
const pending = await WebViewCrash.getPendingCrashInfo();if (pending.value) { console.log(pending.value.platform, pending.value.reason);}clearPendingCrashInfo
Sección titulada “clearPendingCrashInfo”Elimina el marcador almacenado después de que haya terminado su manejo de recuperación.
await WebViewCrash.clearPendingCrashInfo();simulateCrashRecovery
Sección titulada “simulateCrashRecovery”Crea un marcador de crash falso para que QA y depuración local puedan ejercer el camino de recuperación sin hacer que se caiga una WebView real.
const simulated = await WebViewCrash.simulateCrashRecovery();console.log(simulated.value);restartWebView
Sección titulada “restartWebView”Almacena un marcador de reinicio manual y solicita a code nativo que cree una WebView fresca.
await WebViewCrash.restartWebView();Notas de plataforma
Sección titulada “Notas de plataforma”- Android almacena metadatos de errores desde
onRenderProcessGone, incluyendodidCrashy cuando la plataforma los proporciona.rendererPriorityAtExitiOS almacena metadatos de errores desde - y agrega el estado de la aplicación actual cuando esté disponible.
webViewWebContentProcessDidTerminateLos reinicios manuales y programados crean una WebView fresca. Android recrea la actividad del host; iOS reconstruye la vista de puente __CAPGO_KEEP_0__. - Manual and scheduled restarts create a fresh WebView. Android recreates the host activity; iOS rebuilds the Capacitor bridge view.
- Copiar a portapapeles
reason: 'periodicRestart'; reinicios manuales utilizanreason: 'manualRestart'. - La implementación web no detecta crash de render real. La implementación web solo simula el comportamiento con almacenamiento local.
Tipo de referencia
Sección titulada “Tipo de referencia”PendingCrashInfoResult
Sección titulada “PendingCrashInfoResult”export interface PendingCrashInfoResult { /** * Stored crash or restart metadata, or `null` when no marker is pending. */ value: WebViewCrashInfo | null;}WebViewCrashPluginConfig
Sección titulada “WebViewCrashPluginConfig”export interface WebViewCrashPluginConfig { /** * Restart the WebView from native code when the renderer process dies. * * @default true */ restartOnCrash?: boolean;
/** * Fixed native interval, in milliseconds, for proactively replacing long-running WebViews. * * Set to `0` to disable interval restarts. Do not combine an active interval * with `restartCron`; native initialization fails fast when both schedules are configured. * * @default 0 */ restartIntervalMs?: number;
/** * Cron schedule for proactively replacing long-running WebViews. * * Uses standard 5-field cron syntax in the device local timezone: * `minute hour day-of-month month day-of-week`. * * Examples: * - `0 3 * * *` restarts every day at 03:00. * - `0,30 * * * *` restarts every 30 minutes. * * Do not combine this with an active `restartIntervalMs`; native initialization * fails fast when both schedules are configured. */ restartCron?: string;
/** * Delay, in milliseconds, before restarting after a crash. * * @default 0 */ restartAfterCrashDelayMs?: number;}WebViewCrashInfo
Sección titulada “WebViewCrashInfo”export interface WebViewCrashInfo { /** * Platform that detected and stored the marker. */ platform: WebViewCrashPlatform;
/** * Unix timestamp in milliseconds for when the marker was written. */ timestamp: number;
/** * ISO-8601 version of `timestamp`. */ timestampISO: string;
/** * Platform-specific reason for the crash or restart marker. */ reason: WebViewCrashReason;
/** * Last known WebView URL when the marker was written. */ url?: string;
/** * Android-only hint from `RenderProcessGoneDetail.didCrash()`. */ didCrash?: boolean;
/** * Android-only renderer priority reported at exit. */ rendererPriorityAtExit?: number;
/** * iOS-only application state captured when the WebView process died. */ appState?: WebViewCrashAppState;}WebViewCrashPlatform
Sección titulada “WebViewCrashPlatform”export type WebViewCrashPlatform = 'android' | 'ios' | 'web';WebViewCrashReason
Sección titulada “Razón del Cras del WebView”export type WebViewCrashReason = | 'renderProcessGone' | 'webContentProcessDidTerminate' | 'periodicRestart' | 'manualRestart' | 'simulated';WebViewCrashAppState
Sección titulada “Estado del Cras del WebView”export type WebViewCrashAppState = 'active' | 'inactive' | 'background' | 'unknown';Fuente de Verdad
Sección titulada “Fuente de Verdad”Esta página se genera a partir del plugin’s src/definitions.tsRe-ejecutar la sincronización cuando el público API cambie en la fuente
Seguir adelante desde Inicio
Sección titulada “Seguir adelante desde Inicio”Si estás utilizando Inicio planar la conducta de medios y interfaces nativas, conectarla con Usando @capgo/capacitor-webview-crash para la capacidad nativa en Usando @capgo/capacitor-webview-crash, Usando @capgo/capacitor-live-activities para la capacidad nativa en Usando @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities, Usando @capgo/capacitor-video-player para la capacidad nativa en Usando @capgo/capacitor-video-player, y @capgo/capacitor-video-player para el detalle de implementación en @capgo/capacitor-video-player.