Passer au contenu principal
Retour aux plugins
@capgo/capacitor-webview-crash
Tutoriel
@capgo/capacitor-webview-crash

Crash de WebView

Redémarrer les WebViews crashés nativement et recycler les WebViews longs en cours sur un intervalle fixe

Guide

Tutoriel sur la panne de WebView

Tester sur appareil

Télécharger l'application Capgo, puis scannez le code QR code.

Lien QR de prévisualisation du plugin de crash de WebView code

En utilisant @capgo/capacitor-webview-crash

Détection de crashs de WebView récupérés, redémarrage de WebViews morts nativement et recyclage de 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 de WebView natif à 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 une rechargement de page.
  • WebViewCrashPluginConfig - Types plugins.WebViewCrash options dans capacitor.config.ts.
  • getPendingCrashInfo - Retourne le marqueur de crash ou de redémarrage natif stocké, ou null lorsqu'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 panne fictif afin de tester les flux de récupération localement.
  • webViewRestoredAfterCrash - Événement de listener déclenché lorsque le marqueur de panne 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 restartIntervalMs pour des intervalles fixes ou restartCron pour un emploi du planificateur de 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 plans à la fois : l'initialisation native lance une erreur de configuration mortelle lorsque restartCron est défini et restartIntervalMs est supérieur à 0. Sauvegardez l'état critique de l'application avant d'utiliser des plans courts.

Redémarrage natif 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 flux de travail 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 au lieu de recharger la page actuelle.

Référence complète

Continuez avec l'utilisation de @capgo/capacitor-webview-crash

Si vous utilisez L'utilisation de @capgo/capacitor-webview-crash pour planifier le comportement natif des médias et de l'interface, connectez-le avec @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 L'utilisation de @capgo/capacitor-live-activities pour la capacité native dans l'utilisation de @capgo/capacitor-live-activités, @capgo/capacitor-live-activités pour le détail d'implémentation dans @capgo/capacitor-live-activités, et L'utilisation de @capgo/capacitor-video-joueur pour la capacité native dans l'utilisation de @capgo/capacitor-video-joueur.