跳过主要内容
@capgo/capacitor-webview-crash 认证与安全 开源

网页视图崩溃 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应用程序,然后扫描code中的二维码。

WebView Crash 插件预览二维码 code

使用 @capgo/capacitor-webview-crash

检测恢复的 WebView 崩溃,原生重启死掉的 WebView,周期性重启长时间运行的 WebView 以避免内存压力转化为 OOM。

安装

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

此插件暴露的内容

  • 原生重启 WebView 崩溃的 iOS 和 Android
  • 周期性原生重启 WebView,适用于长时间运行的 kiosk、POS、显示屏、扫描器和仪表板应用
  • restartWebView - 允许 JavaScript 请求一个新的原生 WebView 而不需要重新加载页面
  • WebViewCrashPluginConfig - 类型 plugins.WebViewCrash - 在 capacitor.config.ts.
  • getPendingCrashInfo options in null context:HTML text fragment from a longer Capgo UI string (parent key `compare_capawesome_step2_text`). Page/area: Capgo marketing website. Role: Long marketing or legal paragraph. Seen in: page alternatives/capawesome.astro. Preserve Capgo product/brand and developer terms exactly. Message key `compare_capawesome_step2_text` (Compare Capawesome Step2 Text).
  • 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);
}

- 当任何本机重启标记仍待处理时触发的监听事件。

- 示例用法 capacitor.config.ts - 本机自动重启

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 * * * 例如 restartCron is set and restartIntervalMs 设置且 0> 时,native初始化会抛出一个致命配置错误。

持久化关键应用状态之前使用短调度。

手动原生重启 restartWebView() 调用

await WebViewCrash.restartWebView();

context":"HTML text fragment from a longer Capgo UI string (parent key `appflow_migration_step2`). Page/area: Appflow comparison / migration marketing copy. Role: Website copy sentence. Seen in: page alternatives/ionic-appflow.astro. Preserve Capgo product/brand and developer terms exactly. Message key `appflow_migration_step2` (Appflow Migration Step2)." reason: 'manualRestart' 并要求本地 code 创建一个新的 WebView。Android 重建了宿主活动。iOS 重建了 Capacitor 桥视图,因此创建了一个新的 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的原生能力

FAQ

WebView Crash插件FAQ

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

运行"bun add @capgo/capacitor-webview-crash"(或"npm install @capgo/capacitor-webview-crash"),然后运行"bunx cap sync"使iOS和Android项目捕获原生code。从"@capgo/capacitor-webview-crash"中导入它到您的应用code。

@capgo/capacitor-webview-crash与React、Vue和Angular是否兼容?

是。WebView Crash是一个Capacitor包,因此它与任何在Capacitor内运行的Web框架兼容,包括Ionic、React、Vue、Angular、Svelte和普通JavaScript。

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

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 请求。

是否可以在不经过 App Store 审核的情况下更新使用 WebView Crash 的 code?

安装或升级插件会改变本机 code,因此需要新建一个商店构建。之后,JavaScript、HTML 和 CSS 的更改可以立即通过 Capgo 实时更新。

一旦插件在您的商店构建中,__CAPGO_KEEP_0__实时更新将推送您的JavaScript、HTML和CSS更改给用户几分钟内。

从Capgo开始

使用Capgo