Prise de contact
Copiez un prompt de configuration avec les étapes d'installation et la guide markdown complète pour ce plugin.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-webview-crash`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/webview-crash/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Installer
Sous-titre « Installer »Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA à l'aide de la commande suivante :
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsEnsuite, utilisez la prompt suivante :
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-webview-crash` plugin in my project.Si vous préférez la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :
npm install @capgo/capacitor-webview-crashnpx cap syncImporter
Section intitulée “Importer”import { WebViewCrash } from '@capgo/capacitor-webview-crash';Flux de récupération recommandé
Section intitulée “Flux de récupération recommandé”Attachez les écouteurs aussi tôt que possible dans le démarrage de votre application afin que le runtime récupéré puisse réagir avant que les utilisateurs continuent de naviguer :
import { WebViewCrash } from '@capgo/capacitor-webview-crash';
await WebViewCrash.addListener('webViewRestoredAfterCrash', async (info) => { console.log('Recovered after a WebView crash', info);
// Rehydrate critical state, reopen the correct screen, or prompt the user to retry. 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
Section intitulée “Redémarrage auto natif”Définir les options de redémarrage dans capacitor.config.ts afin que la décision reste dans le code natif même lorsque le runtime JavaScript a crashé ou n'a pas encore chargé :
import type { CapacitorConfig } from '@capacitor/cli';import type { WebViewCrashPluginConfig } from '@capgo/capacitor-webview-crash';
const webViewCrash: WebViewCrashPluginConfig = { // Enabled by default. Keep this on for long-running apps. restartOnCrash: true,
// Use a 5-field cron schedule in the device local timezone. // Do not combine restartCron with an active restartIntervalMs. restartCron: '0 3 * * *',
// Optional delay before restarting after a crash. restartAfterCrashDelayMs: 0,};
const config: CapacitorConfig = { plugins: { WebViewCrash: webViewCrash, },};
export default config;Utilisez restartIntervalMs pour les applications toujours en cours où les utilisateurs peuvent conserver la même vue Web ouverte pendant des jours : écrans de kiosque, tableaux de bord de salle de contrôle, balayeurs de entrepôt, terminaux de caisse, tablettes de flotte et affichages numériques. restartCron pour les redémarrages horloges comme 0 3 * * * pour un redémarrage quotidien à 03:00 dans la zone horaire locale du dispositif. Les redémarrages planifiés écrivent un marqueur de retard avec reason: 'periodicRestart'puis Android recrée l'activité de l'hôte et iOS reconstitue la vue de pont Capacitor afin qu'une nouvelle WKWebView soit créée à partir de la code native.
Choisissez une plage ou un calendrier planifié que votre produit peut supporter. restartCron supporte *listes, plages et étapes. 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. Un redémarrage crée un runtime JavaScript frais, il faut donc persister les événements en attente, les états de formulaire non enregistrés et l'état de navigation actuel avant d'utiliser des plans agressifs.
Redémarrage natif manuel
Section intitulée « Redémarrage natif manuel »Appeler restartWebView() context : texte HTML fragment d'une chaîne de Capgo UI plus longue (clé parente `appflow_migration_step2`). Page/zone : Comparaison et migration de l'application Appflow. Rôle : Phrase de copie de site Web. Voir sur : page ionic-appflow.astro. Conservez les termes de produit/marque 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();Copier dans le presse-papier reason: 'manualRestart', resolves the current call, then asks native code to create a fresh WebView. Android recreates the host activity. iOS rebuilds the Capacitor bridge view so a new WKWebView résout l'appel actuel, puis demande à la __CAPGO_KEEP_0__ native de créer une vue WebView fraîche. Android reçoit une nouvelle activité hôte. iOS reçoit une nouvelle vue de pont __CAPGO_KEEP_1__ pour créer une nouvelle
API overview
Vue d'ensemble de APIgetPendingCrashInfo
Section intitulée « Vue d'ensemble de __CAPGO_KEEP_0__ »Section intitulée « getPendingCrashInfo » null lorsque rien n'est en attente.
const pending = await WebViewCrash.getPendingCrashInfo();if (pending.value) { console.log(pending.value.platform, pending.value.reason);}clearPendingCrashInfo
Section intitulée « clearPendingCrashInfo »Supprime le marqueur stocké après la fin de votre gestion de récupération.
await WebViewCrash.clearPendingCrashInfo();simulateCrashRecovery
Section intitulée « simulateCrashRecovery »Crée un marqueur de crash fictif afin que les équipes QA et les développeurs locaux puissent exercer le chemin de récupération sans faire crasher une vraie WebView.
const simulated = await WebViewCrash.simulateCrashRecovery();console.log(simulated.value);restartWebView
Section intitulée « restartWebView »Stocke un marqueur de redémarrage manuel et demande à code natif de créer une WebView fraîche.
await WebViewCrash.restartWebView();Remarques de plateforme
Notes sur la plateforme- Android stocke les métadonnées de crash à partir de
onRenderProcessGone, y comprisdidCrashetrendererPriorityAtExitlorsque la plateforme les fournit. - iOS stocke les métadonnées de crash à partir de
webViewWebContentProcessDidTerminateet ajoute l'état actuel de l'application lorsqu'il est disponible. - Les redémarrages manuels et planifiés créent une nouvelle vue WebView. Android reçoit une nouvelle activité ; iOS reçoit une nouvelle vue de pont Capacitor.
- Les redémarrages planifiés utilisent
reason: 'periodicRestart'; les redémarrages manuels utilisentreason: 'manualRestart'. - La mise en œuvre web ne détecte pas les crashs de rendu réel. L'implémentation web simule uniquement le comportement avec un stockage local.
Référence de type
Référence de typePendingCrashInfoResult
Section intitulée « Résultat d'informations sur le crash en attente »export interface PendingCrashInfoResult { /** * Stored crash or restart metadata, or `null` when no marker is pending. */ value: WebViewCrashInfo | null;}WebViewCrashPluginConfig
Section intitulée « Configurations du plugin de crash de WebView »export interface WebViewCrashPluginConfig { /** * Restart the WebView from native code when the renderer process dies. * * @default true */ restartOnCrash?: boolean;
/** * Fixed native interval, in milliseconds, for proactively replacing long-running WebViews. * * Set to `0` to disable interval restarts. Do not combine an active interval * with `restartCron`; native initialization fails fast when both schedules are configured. * * @default 0 */ restartIntervalMs?: number;
/** * Cron schedule for proactively replacing long-running WebViews. * * Uses standard 5-field cron syntax in the device local timezone: * `minute hour day-of-month month day-of-week`. * * Examples: * - `0 3 * * *` restarts every day at 03:00. * - `0,30 * * * *` restarts every 30 minutes. * * Do not combine this with an active `restartIntervalMs`; native initialization * fails fast when both schedules are configured. */ restartCron?: string;
/** * Delay, in milliseconds, before restarting after a crash. * * @default 0 */ restartAfterCrashDelayMs?: number;}WebViewCrashInfo
Section intitulée « Informations sur le crash de WebView »export interface WebViewCrashInfo { /** * Platform that detected and stored the marker. */ platform: WebViewCrashPlatform;
/** * Unix timestamp in milliseconds for when the marker was written. */ timestamp: number;
/** * ISO-8601 version of `timestamp`. */ timestampISO: string;
/** * Platform-specific reason for the crash or restart marker. */ reason: WebViewCrashReason;
/** * Last known WebView URL when the marker was written. */ url?: string;
/** * Android-only hint from `RenderProcessGoneDetail.didCrash()`. */ didCrash?: boolean;
/** * Android-only renderer priority reported at exit. */ rendererPriorityAtExit?: number;
/** * iOS-only application state captured when the WebView process died. */ appState?: WebViewCrashAppState;}WebViewCrashPlatform
Section intitulée « Plateforme de crash de WebView »export type WebViewCrashPlatform = 'android' | 'ios' | 'web';WebViewCrashReason
Section intitulée « Raison du crash de WebView »export type WebViewCrashReason = | 'renderProcessGone' | 'webContentProcessDidTerminate' | 'periodicRestart' | 'manualRestart' | 'simulated';WebViewCrashAppState
Section intitulée « État d'application du crash de WebView »export type WebViewCrashAppState = 'active' | 'inactive' | 'background' | 'unknown';Source De Vérité
Section intitulée « Source De Vérité »Cette page est générée à partir du plugin’s src/definitions.tsRe-faites la synchronisation lorsque le public API change en amont.
Continuez de là depuis Getting Started
Section intitulée « Continuez de là depuis Getting Started »Si vous utilisez Getting Started pour planifier le comportement de médias natifs et d'interface, connectez-l’avec En utilisant @capgo/capacitor-webview-crash pour la capacité native dans En utilisant @capgo/capacitor-webview-crash, Utilisation de @capgo/capacitor-activités-en-vivre pour la capacité native dans Utilisation de @capgo/capacitor-activités-en-vivre @capgo/capacitor-activités-en-vivre pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre Utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans Utilisation de @capgo/capacitor-joueur-de-videos, et @capgo/capacitor-joueur-de-videos pour le détail d'implémentation dans @capgo/capacitor-joueur-de-videos.