メインコンテンツにスキップ
プラグインに戻る
@capgo/capacitor-webview-crash
チュートリアル
by github.com/Cap-go

ウェブビューのクラッシュ

再起動したウェブビューをネイティブに再起動し、一定間隔で長時間実行されているウェブビューをリサイクルする

ガイド

WebView クラッシュのチュートリアル

使用方法: @capgo/capacitor-webview-crash

リCOVERした WebView クラッシュを検出、死んだ WebView をネイティブで再起動し、固定間隔で長時間実行されている WebView をリサイクルする

インストール

npm install @capgo/capacitor-webview-crash
npx cap sync

このプラグインが公開するもの

  • iOSとAndroidでWebViewがクラッシュしたときにネイティブ再起動
  • kiosk、POS、サイン、スキャナー、ダッシュボードアプリなどの、数日間動作するアプリ用の固定間隔のネイティブWebView再起動
  • restartWebView - JavaScriptがページリロードなしで新しいネイティブWebViewを要求します。
  • WebViewCrashPluginConfig - 型 plugins.WebViewCrash オプション capacitor.config.ts.
  • getPendingCrashInfo in null - 返却されたランタイム内にまだ pendding している場合、または何も pendding していない場合に、ストレージされたネイティブクラッシュまたは再起動マーカーを返します。
  • clearPendingCrashInfo - アプリが状態を復元した後、ストレージされたマーカーをクリアします。
  • simulateCrashRecovery - ローカルでリカバリフローをテストするために、フェイククラッシュマーカーを作成します。
  • webViewRestoredAfterCrash - リカバリランタイム内にまだ pendding しているクラッシュマーカーが発生したときに発火するリスナーイベント。
  • webViewRestoredAfterRestart - ネイティブ再起動マーカーが pendding している場合に発火するリスナーイベント。

使用例

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);
}

ネイティブ 自動再起動

JavaScript が利用できない場合でも、常に動作するように設定する capacitor.config.ts JavaScript が利用できない場合でも、常に動作するように設定する

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;

定期的な再起動は reason: 'periodicRestart'固定間隔で restartIntervalMs またはデバイスのローカルタイムゾーン内の 5 つのフィールドのクロノスケジュールで restartCron 例えば、毎日 03:00 の再起動 0 3 * * * 両方のスケジュールを同時に設定しないでください: restartCron が設定されている場合と restartIntervalMs0の場合、ネイティブの初期化は致命的な構成エラーを投げます。

短いスケジュールを使用する前に、重要なアプリケーション状態を永続化してください。

JavaScriptがネイティブのWebViewを予防的に置き換えるべきだと判断したときに呼び出される、例えばメモリが重いワークフロー後: restartWebView() メソッドは

await WebViewCrash.restartWebView();

ネイティブの__CAPGO_KEEP_0__に新しいWebViewを作成するように依頼します。Androidはホストアクティビティを再構築します。iOSは__CAPGO_KEEP_1__ブリッジビューを再構築し、新しい 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 を生成します。

フルリファレンス

Capacitorの@capgo/capacitor-webview-crashプラグインを使用している場合

Capacitorの@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-webview-crashプラグインを使用している場合 Capacitorの@capgo/capacitor-webview-crashプラグインを使用している場合 nativeメディアとインターフェイスの動作を計画し、 @capgo/capacitor-webview-crash @capgo/capacitor-webview-crashの実装詳細 Getting Started Getting Startedの実装詳細 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesのネイティブ機能 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-video-player @capgo/capacitor-video-playerのネイティブ機能