Guide
Tutoriel sur les crashs de vues Web
Utiliser @capgo/capacitor-webview-crash
Détection des crashs de vues Web récupérés, redémarrage des vues Web mortes nativement, et recyclage des vues Web longues en cours sur un intervalle fixe avant que la pression de mémoire ne se transforme en OOM.
Installation
npm install @capgo/capacitor-webview-crash
npx cap sync
Ce plugin expose
- Redémarrage natif après les crashes de WebView sur iOS et Android.
- Redémarrage natif de WebView à intervalle fixe pour les applications kiosk, POS, de signalisation, de scanner et de tableau de bord qui fonctionnent pendant des jours.
restartWebView- Permet à JavaScript de demander un WebView natif frais sans faire recharger la page.WebViewCrashPluginConfig- Typesplugins.WebViewCrashoptions danscapacitor.config.ts.getPendingCrashInfo- Retourne le marqueur de crash ou de redémarrage natif stocké, ounulllorsqu'il n'y a rien en attente.clearPendingCrashInfo- Efface le marqueur stocké après que votre application ait restauré son état.simulateCrashRecovery- Crée un marqueur de crash fictif pour tester les flux de récupération localement.webViewRestoredAfterCrash- Événement de listener déclenché lorsqu'un marqueur de crash est toujours en attente dans le runtime récupéré.webViewRestoredAfterRestart- Événement de listener déclenché lorsque tout marqueur de redémarrage natif est toujours en attente.
Exemple d'utilisation
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);
}
Redémarrage Auto Natif
Configurez le comportement de redémarrage dans capacitor.config.ts afin qu'il continue à fonctionner lorsque JavaScript n'est pas 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;
Les redémarrages planifiés écrivent reason: 'periodicRestart'. Utilisez-le restartIntervalMs pour des intervalles fixes ou restartCron pour un horaire de 5 champs dans la zone horaire locale du dispositif, comme 0 3 * * * pour un redémarrage quotidien à 03:00. N'configurez pas les deux horaires de redémarrage à la fois : l'initialisation native lance une erreur de configuration mortelle lorsque restartCron est défini et restartIntervalMs est supérieur à 0. Enregistrez l'état critique de l'application avant d'utiliser des horaires courts.
Redémarrage natif manuel
Appeler restartWebView() lorsque JavaScript décide que la vue Web native doit être remplacée de manière proactive, par exemple après un flux de travail lourd en mémoire :
await WebViewCrash.restartWebView();
La méthode écrit reason: 'manualRestart' et demande à la vue native code de créer une vue Web fraîche. Android reçoit une nouvelle activité hôte. iOS reçoit un nouveau pont de vue Capacitor au lieu de recharger la page actuelle. WKWebView Référence complète
__CAPGO_KEEP_0__:
- https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-vue-web-crash/ https://github.com/Cap-go/capacitor-webview-crash/
- Continuez à partir de l'utilisation de @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-vue-web-crash
https://capgo.com/Cap-go/capacitor-vue-web-crash/
Si vous utilisez Utilisation de @capgo/capacitor-webview-crash pour planifier le comportement des médias et de l'interface native, connectez-le à @capgo/capacitor-webview-crash pour les détails d'implémentation dans @capgo/capacitor-webview-crash, Prise en main pour les détails d'implémentation dans Prise en main, Utilisation de @capgo/capacitor-live-activities pour la capacité native dans Utilisation de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, et Utilisation de @capgo/capacitor-video-player pour la capacité native en Utilisation @capgo/capacitor-player vidéo.