跳转至正文
@capgo/capacitor-webview-crash 身份验证与安全 开源

WebView 崩溃 Capacitor 插件

原生重启崩溃的 WebView,并按固定间隔回收长时间运行的 WebView

安装

bun add @capgo/capacitor-webview-crash bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-webview-crash
  • pnpm add @capgo/capacitor-webview-crash
  • yarn add @capgo/capacitor-webview-crash

指南

如何在 Capacitor 中使用 WebView Crash

在设备上测试

下载 Capgo App,然后扫描二维码 code。

WebView Crash 插件预览二维码 code

使用 @capgo/capacitor-webview-crash

检测已恢复的 WebView crash,通过 Native 方式重启失效的 WebView,并在内存压力导致 OOM 之前,按固定间隔回收运行时间过长的 WebView。

安装

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

插件暴露的内容

  • 在 iOS 和 Android 上实现 WebView crash 后的 Native 重启。
  • 为需要长时间运行的 kiosk、POS、广告机、扫描器和 dashboard 应用提供固定间隔的 Native WebView 重启功能。
  • restartWebView - 允许 JavaScript 在不刷新页面的情况下请求一个新的 Native WebView。
  • WebViewCrashPluginConfig - 类型 plugins.WebViewCrash 中的选项 capacitor.config.ts.
  • getPendingCrashInfo - 返回存储的原生崩溃或重启标记,或者 null 当没有待处理项时。
  • clearPendingCrashInfo - 在应用恢复状态后清除存储的标记。
  • simulateCrashRecovery - 创建一个模拟的崩溃标记,以便在本地测试恢复流程。
  • webViewRestoredAfterCrash - 当恢复后的运行时中仍存在待处理的崩溃标记时触发的监听事件。
  • webViewRestoredAfterRestart - 当仍有任何待处理的原生重启标记时触发的监听事件。

用法示例

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

Native 自动重启

Configure restart behavior in 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 用于固定间隔,或 restartCron 用于设备本地时区的 5 位 cron 表达式,例如 0 3 * * * 用于每日 03:00 重启。请勿同时配置两种调度方式:当 restartCron 被设置且 restartIntervalMs 大于 0时,原生初始化会抛出致命配置错误。在使用短间隔调度前,请务必持久化关键的应用状态。

手动原生重启

调用 restartWebView() 当 JavaScript 决定主动替换原生 WebView 时,例如在执行完内存密集型工作流后:

await WebViewCrash.restartWebView();

该方法会写入 reason: 'manualRestart' 并请求原生 code 创建一个新的 WebView。Android 会重新创建 host activity。iOS 则会重建 Capacitor bridge view,从而创建一个新的 WKWebView 而不是重新加载当前页面。

完整参考

继续阅读 使用 @capgo/capacitor-webview-crash

如果你正在使用 使用 @capgo/capacitor-webview-crash 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-webview-crash 了解 @capgo/capacitor-webview-crash 中的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @capgo/capacitor-live-activities 用于使用 @capgo/capacitor-live-activities 时的原生能力, @capgo/capacitor-live-activities 关于 @capgo/capacitor-live-activities 中的实现细节,以及 使用 @capgo/capacitor-video-player 有关“使用 @capgo/capacitor-video-player.”中的原生能力

常见问题

WebView Crash 插件常见问题

如何在 Capacitor 应用中安装 WebView Crash 插件?

运行 "bun add @capgo/capacitor-webview-crash"(或 "npm install @capgo/capacitor-webview-crash"),然后运行 "bunx cap sync",使 iOS 和 Android 项目同步 native code。在你的应用 code 中从 "@capgo/capacitor-webview-crash" 导入即可。

@capgo/capacitor-webview-crash 是否支持 React、Vue 和 Angular?

支持。WebView Crash 是一个 Capacitor 包,因此它适用于任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-webview-crash 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-webview-crash 是免费开源的吗?

是的。code 的源码已在 GitHub 上公开,地址为 https://github.com/Cap-go/capacitor-webview-crash/,也可以直接从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

使用 WebView Crash 的 code 能在不经过 App Store 审核的情况下更新吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核,即可发布 WebView Crash 改动

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo