Saltar al contenido

Getting Started

GitHub

Puedes utilizar nuestra configuración asistida por inteligencia artificial para instalar el complemento. Agrega las Capgo habilidades a tu herramienta de inteligencia artificial utilizando el siguiente comando:

Ventana de terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

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

Si prefieres la configuración manual, instala el complemento ejecutando los siguientes comandos y sigue las instrucciones específicas de la plataforma a continuación:

Ventana de terminal
npm install @capgo/capacitor-webview-crash
npx cap sync
import { WebViewCrash } from '@capgo/capacitor-webview-crash';

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

Establecer opciones de reinicio en capacitor.config.ts para que la decisión permanezca en nativo code incluso cuando el runtime 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;

Utilice 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 de sala, escáneres de almacén, terminales de caja, tabletas de flota y señalización digital. Utilice 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 nativa para crear un nuevo WKWebView is created from native code.

admite restartCron listas, rangos y pasos. No configure ambos horarios al mismo tiempo: la inicialización nativa lanza un error de configuración fatal cuando *está configurado y restartCron es mayor que restartIntervalMs . Un reinicio crea un entorno de tiempo de ejecución 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. 0reinicios programados

Llamar restartWebView() contexto: Cuando el entorno de ejecución JavaScript actual decide que el navegador 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 inalcanzable prolongada:

await WebViewCrash.restartWebView();

El método escribe un marcador pendiente con reason: 'manualRestart'resuelve la llamada actual, luego pregunta al navegador nativo code que cree un navegador fresco. Android recrea la actividad de host. iOS reconstruye el puente de vista Capacitor para crear un nuevo WKWebView en lugar de recargar la página actual.

Devuelve el marcador de reinicio o crash 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);
}

Elimina el marcador almacenado después de que se haya finalizado el manejo de recuperación.

await WebViewCrash.clearPendingCrashInfo();

Crea un marcador de falla ficticio para que QA y depuración local puedan ejercer el camino de recuperación sin hacer que se caiga un WebView real.

const simulated = await WebViewCrash.simulateCrashRecovery();
console.log(simulated.value);

Almacena un marcador de reinicio manual y pide a code nativo que cree un WebView fresco.

await WebViewCrash.restartWebView();

Notas de plataforma

Nota de plataforma
  • Android almacena metadatos de errores desde onRenderProcessGone, incluyendo didCrash y rendererPriorityAtExit cuando la plataforma los proporciona.
  • iOS almacena metadatos de errores desde webViewWebContentProcessDidTerminate y agrega el estado de la aplicación actual cuando esté disponible.
  • Los reinicios manuales y programados crean una WebView fresca. Android recrea la actividad del host; iOS reconstruye la vista de puente Capacitor.
  • Los reinicios programados utilizan reason: 'periodicRestart'Los reinicios manuales utilizan reason: 'manualRestart'.
  • La implementación web no detecta errores de renderizado reales. La implementación web solo simula el comportamiento con almacenamiento local.
export interface PendingCrashInfoResult {
/**
* Stored crash or restart metadata, or `null` when no marker is pending.
*/
value: WebViewCrashInfo | null;
}
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;
}
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;
}
export type WebViewCrashPlatform = 'android' | 'ios' | 'web';
export type WebViewCrashReason =
| 'renderProcessGone'
| 'webContentProcessDidTerminate'
| 'periodicRestart'
| 'manualRestart'
| 'simulated';
export type WebViewCrashAppState = 'active' | 'inactive' | 'background' | 'unknown';

Esta página se genera a partir del plugin’s src/definitions.tsRe-ejecutar la sincronización cuando el API público cambie en la fuente.

Si estás utilizando Getting Started para planificar el comportamiento de medios y interfaz nativa, conecta con Usando @capgo/capacitor-webview-crash para la capacidad nativa en Usando @capgo/capacitor-webview-crash, Usando @capgo/capacitor-actividades en vivo para la capacidad nativa en Usando @capgo/capacitor-actividades en vivo @capgo/capacitor-actividades en vivo para el detalle de implementación en @capgo/capacitor-actividades en vivo Usando @capgo/capacitor-reproductor de video para la capacidad nativa en Usando @capgo/capacitor-reproductor de video, y @capgo/capacitor-reproductor de video para el detalle de implementación en @capgo/capacitor-reproductor de video