Guide
Tutoriel sur la panne de WebView
Utilisation de @capgo/capacitor-webview-crash
Détecter les crashs de WebView récupérés, redémarrer les WebViews morts nativement et recycler les WebViews longs en cours sur un intervalle fixe avant que la pression de mémoire se transforme en OOM.
Installer
npm install @capgo/capacitor-webview-crash
npx cap sync
Ce que ce plugin expose
- Redémarrage natif après les crashs de WebView sur iOS et Android.
- Redémarrage natif de WebView sur un intervalle fixe pour les applications kiosk, POS, de signalisation, de scanner et de tableau de bord qui fonctionnent pendant des jours.
restartWebView- Permet aux scripts JavaScript de demander un WebView natif frais sans faire une rechargement de page.WebViewCrashPluginConfig- Typesplugins.WebViewCrashoptions danscapacitor.config.ts.getPendingCrashInfo- Retourne le marqueur de crash ou de redémarrage natif stocké, ounulllorsque rien n'est en attente.clearPendingCrashInfo- Supprime le marqueur stocké après que votre application ait restauré son état.simulateCrashRecovery- Crée un marqueur de crash fictif afin de tester les flux de récupération localement.webViewRestoredAfterCrash- Événement de listener déclenché lorsque le 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 programmés écrivent reason: 'periodicRestart'. Utilisez restartIntervalMs pour des intervalles fixes ou restartCron pour un programme de tâches cron à 5 champs dans la zone horaire locale du dispositif, comme 0 3 * * * pour un redémarrage quotidien à 03:00. N'configurez pas les deux programmes à la fois : l'initialisation native lance une erreur de configuration mortelle lorsque restartCron est défini et restartIntervalMs est supérieur à 0Sauvegardez l'état critique de l'application avant d'utiliser des programmes courts.
Redémarrage Native Manuel
Appeler restartWebView() lorsque JavaScript décide que la vue native WebView doit être remplacée de manière proactive, par exemple après un workflow lourd en mémoire :
await WebViewCrash.restartWebView();
La méthode écrit reason: 'manualRestart' and asks native code to create a fresh WebView. Android recreates the host activity. iOS rebuilds the Capacitor bridge view so a new WKWebView Bridge de Vue
Référence Complète
- GitHub : https://github.com/Cap-go/capacitor-webview-crash/
- Docs : /docs/plugins/webview-crash/
Continuez d'où vous en étiez avec l'utilisation de @capgo/capacitor-webview-crash
Si vous utilisez L'utilisation de @capgo/capacitor-webview-crash pour planifier le comportement des médias et de l'interface natifs, connectez-l’avec @capgo/capacitor-webview-crash pour les détails d'implémentation dans @capgo/capacitor-webview-crash Getting Started pour les détails d'implémentation dans Getting Started L'utilisation de @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-activités en direct, @capgo/capacitor-activités en direct pour le détail d'implémentation dans @capgo/capacitor-activités en direct, et Utiliser @capgo/capacitor-joueur de vidéo pour la capacité native dans Utiliser @capgo/capacitor-joueur de vidéo.