Erste Schritt
Eine Einrichtungsanleitung mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.
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.
Installieren
Abschnitt mit dem Titel „Installieren“Sie können unsere AI-gestützte Einrichtung verwenden, um den Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem AI-Tool hinzu, indem Sie die folgende Befehl ausführen:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsDann verwenden Sie den folgenden Prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-webview-crash` plugin in my project.Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie den Plugin, indem Sie die folgenden Befehle ausführen und die Plattform-spezifischen Anweisungen unten befolgen:
npm install @capgo/capacitor-webview-crashnpx cap syncImportieren
Abschnitt: Importierenimport { WebViewCrash } from '@capgo/capacitor-webview-crash';Empfohlener Wiederherstellungsfluss
Abschnitt: Empfohlener WiederherstellungsflussFügen Sie Listener so früh wie möglich in Ihrer Anwendungsstart hinzu, damit das wiederhergestellte Runtime-System reagieren kann, bevor die Benutzer weiter navigieren:
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);}Native Auto-Neustart
Abschnitt: Native Auto-NeustartSetzen Sie die Neustartoptionen in capacitor.config.ts so dass die Entscheidung im native code bleibt, selbst wenn das JavaScript- Runtime abgestürzt ist oder noch nicht geladen wurde:
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;Verwenden Sie restartIntervalMs für Apps, die immer eingeschaltet sind und bei denen die Benutzer den gleichen WebView über Tage hinweg offen halten können: Kiosk-Anzeigen, Steuerungszentralen, Lager-Scannern, POS-Terminals, Flotten-Tablets und digitale Anzeigen. Verwenden Sie restartCron für Uhrzeiten wie 0 3 * * * für einen täglichen Neustart um 03:00 Uhr in der lokalen Geräetzonenzeit. Geplante Neustarts schreiben einen vorläufigen Marker mit reason: 'periodicRestart', dann wird Android die Hostaktivität neu erstellen und iOS die Capacitor-Brückeansicht neu erstellen, sodass ein neuer WKWebView erzeugt wird, der aus nativen code-Komponenten besteht.
Wählen Sie einen Zeitabstand oder einen Cron-Schedule, den Ihr Produkt ertragen kann. restartCron unterstützt *Listen, Ränge und Schritte. Konfigurieren Sie nicht beide Schedules gleichzeitig: Die native Initialisierung wirft einen fatalen Konfigurationsfehler, wenn restartCron festgelegt ist und restartIntervalMs größer als 0ist. Ein Neustart erstellt ein frisches JavaScript- Runtime, daher müssen Sie vor der Verwendung aggressiver Schedules die angesammelten Ereignisse, ungespeicherte Formulardaten und die aktuelle Navigationseinstellung persistieren.
Manuelle native Neustart
Abschnitt mit dem Titel “Manuelle native Neustart”Aufrufen restartWebView() Kontext: Appflow-Vergleich / -Migration-Werbung. Seite: Ionic-Appflow.astro. Rolle: Website-Text. Gesehen in: Seite ionic-appflow.astro. Bewahrt Capgo-Produkt-/Marken- und Entwicklertrems genau.
await WebViewCrash.restartWebView();Zwischenablage kopieren 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 löst die aktuelle Anfrage auf, fragt dann den native __CAPGO_KEEP_0__ an, um einen frischen WebView zu erstellen. Android reaktivierte die Hostaktivität. iOS rekonstruiert die __CAPGO_KEEP_1__ Bridgeansicht, sodass stattdessen eine neue
API overview
API-ÜbersichtgetPendingCrashInfo
Abschnitt mit dem Titel “__CAPGO_KEEP_0__-Übersicht”Abschnitt mit dem Titel “getPendingCrashInfo” null wenn nichts im Gange ist.
const pending = await WebViewCrash.getPendingCrashInfo();if (pending.value) { console.log(pending.value.platform, pending.value.reason);}clearPendingCrashInfo
Abschnitt mit dem Titel “clearPendingCrashInfo”Löscht den gespeicherten Marker nach Abschluss Ihrer Wiederherstellungsverarbeitung.
await WebViewCrash.clearPendingCrashInfo();simulateCrashRecovery
Abschnitt mit dem Titel “simulateCrashRecovery”Erstellt einen fiktiven Crashmarker, damit QA und lokale Debugging die Wiederherstellungsroute ohne einen echten WebView zu kraschen ausüben können.
const simulated = await WebViewCrash.simulateCrashRecovery();console.log(simulated.value);restartWebView
Abschnitt mit dem Titel “restartWebView”Speichert einen manuellen Neustartmarker und fragt den native code an, einen frischen WebView zu erstellen.
await WebViewCrash.restartWebView();Plattformhinweise
Plattformhinweise- Android speichert Metadaten zu Crashes von
onRenderProcessGone, einschließlichdidCrashundrendererPriorityAtExitwenn die Plattform sie bereitstellt. - iOS speichert Metadaten zu Crashes von
webViewWebContentProcessDidTerminateund fügt den aktuellen Anwendungsstatus hinzu, wenn verfügbar. - Manuelle und geplante Neustarts erstellen einen frischen WebView. Android reaktualisiert die Hostaktivität; iOS rekonstruiert die Capacitor Bridgeansicht.
- Geplante Neustarts verwenden
reason: 'periodicRestart'; manuelle Neustarts verwendenreason: 'manualRestart'. - Webdetektion von echten Renderer-Crashes funktioniert nicht. Die Webimplementierung simuliert nur das Verhalten mit lokalen Speicher.
Typenreferenz
Abschnitt mit dem Titel “Typenreferenz”PendingCrashInfoResult
Abschnitt mit dem Titel “PendingCrashInfoResult”export interface PendingCrashInfoResult { /** * Stored crash or restart metadata, or `null` when no marker is pending. */ value: WebViewCrashInfo | null;}WebViewCrashPluginConfig
Abschnitt mit dem Titel “WebViewCrashPlugin-Konfiguration”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
Abschnitt mit dem Titel “WebViewCrash-Info”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
Abschnitt mit dem Titel “WebViewCrash-Plattform”export type WebViewCrashPlatform = 'android' | 'ios' | 'web';WebViewCrashReason
Abschnitt mit dem Titel “WebViewCrash-Ursache”export type WebViewCrashReason = | 'renderProcessGone' | 'webContentProcessDidTerminate' | 'periodicRestart' | 'manualRestart' | 'simulated';WebViewCrashAppState
Abschnitt mit dem Titel “WebViewCrash-Zustand”export type WebViewCrashAppState = 'active' | 'inactive' | 'background' | 'unknown';Quelle der Wahrheit
Abschnitt mit dem Titel „Quelle der Wahrheit“Diese Seite wird aus dem Plugin generiert. src/definitions.tsRe-run die Synchronisierung, wenn die öffentliche API upstream geändert wird.
Weitermachen von Getting Started
Abschnitt mit dem Titel „Weitermachen von Getting Started“Wenn Sie native Medien und Schnittstellenverhalten planen, verbinden Sie es mit Getting Started mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-webview-crash für die native Fähigkeit in Using @capgo/capacitor-webview-crash, Wenn Sie native Medien und Schnittstellenverhalten planen, verbinden Sie es mit @capgo/capacitor-webview-crash Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player und @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player