Passer à la navigation principale
Retour aux plugins
@capgo/capacitor-webview-crash
Tutoriel
@capgo/capacitor-webview-crash

Panne de la vue Web

Redémarrer les vues Web crashées nativement et recycler les vues Web longues 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.

Vue d'ensemble du plugin de crash de la vue Web code

Utilisation de @capgo/capacitor-webview-crash

Détecter les crashs de la vue Web récupérés, redémarrer les vues Web mortes de manière native et recycler les vues Web longues en cours d'exécution 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 la vue Web sur iOS et Android.
  • Redémarrage de la vue Web native 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 une vue Web native fraîche 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 lorsque rien n'est en attente.
  • clearPendingCrashInfo - Supprime le marqueur stocké après que votre application a 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 horaire de 5 champs de cron dans la zone horaire locale du dispositif, comme 0 3 * * * pour un redémarrage quotidien à 03:00. N'configurez pas les deux horaires à 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 Native Manuel

Appeler restartWebView() contexte : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_migration_step2`). Page/zone : Comparaison et migration de l'application Appflow / marketing de copie. Rôle : Phrase de copie du site Web. Voir dans : page ionic-appflow.astro. Conservez les termes de produit/branche et les termes de développeur de Capgo exactement. Clé de message `appflow_migration_step2` (Étape 2 de la migration d'Appflow).

await WebViewCrash.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 : 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 et demande à la native __CAPGO_KEEP_0__ de créer une vue WebView fraîche. Android recrée l'activité hôte. iOS reçoit la vue de pont __CAPGO_KEEP_1__ et crée une nouvelle

au lieu de recharger la page actuelle. Référence complète

Continuez à partir de 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 native, connectez-l’avec @capgo/capacitor-webview-crash pour les détails d'implémentation dans @capgo/capacitor-webview-crash Démarrage pour les détails d'implémentation dans Démarrage 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.