Guía
Tutorial sobre congelamiento de vista web
Usando @capgo/capacitor-webview-crash
Detecta los congelamientos de vistas web recuperados, reinicia las vistas web muertas nativamente y recicla las vistas web que corren durante un período prolongado con un intervalo fijo antes de que la presión de memoria se convierta en un OOM.
Instalar
npm install @capgo/capacitor-webview-crash
npx cap sync
¿Qué Exposiciones Este Plugin?
- Reiniciar nativo después de que se caiga WebView en iOS y Android.
- Reinicio de WebView nativo con intervalo fijo para aplicaciones de kiosk, POS, señalización, escáner y tablero que funcionan durante días.
restartWebView- Deja que JavaScript solicite un WebView nativo fresco sin realizar una recarga de página.WebViewCrashPluginConfig- Tiposplugins.WebViewCrashopciones encapacitor.config.ts.getPendingCrashInfo- Devuelve el marcador de crash o reinicio nativo almacenado, onullcuando no hay nada pendiente.clearPendingCrashInfo- Borra el marcador almacenado después de que tu aplicación haya restaurado su estado.simulateCrashRecovery- Crea un marcador de crash falso para que los flujos de recuperación puedan ser probados localmente.webViewRestoredAfterCrash- Evento de escucha disparado cuando un marcador de crash sigue pendiente en el runtime recuperado.webViewRestoredAfterRestart- Se dispara el evento de escucha cuando cualquier marcador de reinicio nativo sigue pendiente.
Uso de ejemplo
import { WebViewCrash } from '@capgo/capacitor-webview-crash';
await WebViewCrash.addListener('webViewRestoredAfterCrash', async (info) => {
console.log('Recovered after a WebView crash', info);
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
Configure el comportamiento de reinicio en capacitor.config.ts para que siga funcionando cuando JavaScript no esté disponible:
import type { CapacitorConfig } from '@capacitor/cli';
import type { WebViewCrashPluginConfig } from '@capgo/capacitor-webview-crash';
const webViewCrash: WebViewCrashPluginConfig = {
restartOnCrash: true,
restartCron: '0 3 * * *',
restartAfterCrashDelayMs: 0,
};
const config: CapacitorConfig = {
plugins: {
WebViewCrash: webViewCrash,
},
};
export default config;
Los reinicios programados escriben reason: 'periodicRestart'. Utilice restartIntervalMs para intervalos fijos o restartCron para un horario de 5 campos en la zona horaria local del dispositivo, como 0 3 * * * para un reinicio diario a las 03:00. No configure ambos horarios al mismo tiempo: la inicialización nativa lanza un error de configuración fatal cuando restartCron está configurado y restartIntervalMs es mayor que 0. Persistir el estado crítico de la aplicación antes de utilizar horarios cortos.
Reiniciar Nativo Manual
Llamar restartWebView() cuando JavaScript decide que el WebView nativo debe ser reemplazado de manera proactiva, por ejemplo después de un flujo de trabajo pesado en memoria:
await WebViewCrash.restartWebView();
El método escribe reason: 'manualRestart' y pregunta a code nativo que cree un WebView fresco. Android recrea la actividad de host. iOS reconstruye la vista de puente Capacitor para crear un nuevo WKWebView en lugar de recargar la página actual.
Referencia Completa
- GitHub: https://github.com/Cap-go/capacitor-webview-crash/
- Docs: /docs/plugins/webview-crash/
Sigue adelante desde Usando @capgo/capacitor-webview-crash
Si estás utilizando Usando @capgo/capacitor-webview-crash para planificar el comportamiento de medios y interfaz nativa, conecta con @capgo/capacitor-webview-crash para los detalles de implementación en @capgo/capacitor-webview-crash, Inicio rápido para los detalles de implementación en Inicio rápido, Usando @capgo/capacitor-live-activities para la capacidad nativa en Usando @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para los detalles de implementación en @capgo/capacitor-live-activities, y Usando @capgo/capacitor-video-player para la capacidad nativa en Usando @capgo/capacitor-reproductor de video.