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

WebView Crash

Redémarrer les vues Web crashées nativement et recycler les vues Web longues en cours sur un intervalle fixe

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 - 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 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://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.