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

WebView 安全防护 Capacitor 插件

检测 WebView 在后台被终止,并在回到前台时重新启动

安装

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

指南

如何在 Capacitor 中使用 WebView Guardian

在设备上测试

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

WebView Guardian 插件预览二维码 code

使用 @capgo/capacitor-webview-guardian

Capacitor 插件用于检测 WebView 何时在后台被终止,并在回到前台时重新启动。

安装

bun add @capgo/capacitor-webview-guardian
bunx cap sync

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

import { WebviewGuardian } from '@capgo/capacitor-webview-guardian';

API 概览

方法 描述
startMonitoring 开始监听前台事件并自动检查 WebView 健康状态。
stopMonitoring 停止所有自动前台监控。
getState 返回当前已知的最新监控状态。
checkNow 立即强制触发一次 WebView 健康探测。

示例

startMonitoring()

开始监听前台事件并自动检查 WebView 健康状态。

import { WebviewGuardian } from '@capgo/capacitor-webview-guardian';

const result = await WebviewGuardian.startMonitoring();
console.log(result);

stopMonitoring()

停止所有自动前台监控。

import { WebviewGuardian } from '@capgo/capacitor-webview-guardian';

const result = await WebviewGuardian.stopMonitoring();
console.log(result);

getState()

返回当前已知的最新监控状态。

import { WebviewGuardian } from '@capgo/capacitor-webview-guardian';

const result = await WebviewGuardian.getState();
console.log(result);

checkNow()

立即强制触发一次 WebView 健康探测。

import { WebviewGuardian } from '@capgo/capacitor-webview-guardian';

const result = await WebviewGuardian.checkNow();
console.log(result);

监听事件

addListener 会返回一个句柄。调用 handle.remove() 当屏幕卸载时。

完整参考文档

继续阅读“使用 @capgo/capacitor-webview-guardian”

如果你正在使用 使用 @capgo/capacitor-webview-guardian 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-webview-guardian 了解 @capgo/capacitor-webview-guardian 中的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @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 Guardian 插件常见问题

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

运行 "bun add @capgo/capacitor-webview-guardian"(或 "npm install @capgo/capacitor-webview-guardian"),然后运行 "bunx cap sync",让 iOS 和 Android 项目加载原生 code。再在应用 code 中从 "@capgo/capacitor-webview-guardian" 导入即可。

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

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

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

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

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

是的。code 已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-webview-guardian/,该包可从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以在不经过 App Store 审核的情况下更新使用 WebView Guardian 的 code 吗?

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

无需等待 App Store 审核,即可快速发布 WebView Guardian 的更新

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

开始使用 Capgo