version-polling 是一个轻量级的 JavaScript 库，旨在解决 web 应用中版本更新提示和自动刷新页面的问题。通过实时检测 web 应用的 index.html 文件内容变化，当服务端发布新版本后，前端会自动弹出更新提示，让用户刷新页面以加载最新的资源和功能，从而提高用户体验和数据准确性。
version-polling 的设计目的是为了解决后端部署之后，如何通知用户系统有新版本，并引导用户刷新页面以加载最新资源的问题。通过实时监测页面内容变化并弹出更新提示，用户可以及时获知新版本发布，并完成应用更新，从而提升用户体验和数据准确性。
version-polling 适用于用户长时间未刷新页面的 web 应用场景，特别是后台管理系统。在用户长时间未刷新页面的情况下，如果应用有新功能添加或问题修复，version-polling 可以及时通知用户有新版本发布，并引导用户刷新页面以加载最新资源，从而避免影响用户体验和数据准确性。
Web Worker API 在浏览器后台轮询请求页面，不会影响主线程运行。适用于支持原生 ES 模块的现代浏览器，具体可参考以下 browserslist 配置
defaults and supports es6-module
maintained node versions
# 本地项目安装
npm install version-polling --save
// 在应用入口文件中使用: 如 main.js, app.jsx
import { createVersionPolling } from "version-polling";
createVersionPolling({
appETagKey: "__APP_ETAG__",
pollingInterval: 5 * 1000, // 单位为毫秒
silent: process.env.NODE_ENV === "development", // 开发环境下不检测
onUpdate: (self) => {
// 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面
const result = confirm("页面有更新，点击确定刷新页面！");
if (result) {
self.onRefresh();
} else {
self.onCancel();
}
// 强制更新可以用alert
// alert('有新版本，请刷新页面');
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>示例</title>
</head>
<body>
<script src="//unpkg.com/version-polling/dist/version-polling.min.js"></script>
<script>
// 示例代码
// 创建一个版本检测实例
const versionPolling = new VersionPolling();
// 启动版本检测
versionPolling.start();
// 监听版本变化事件
versionPolling.onVersionChange((newVersion) => {
// 弹出更新提示
alert(`发现新版本 ${newVersion}，请刷新页面以加载最新资源`);
});
</script>
</body>
</html>
在项目 index.html 下直接插入 script，类似于百度统计那种用法，具体代码参考:https://github.com/JoeshuTT/version-polling
Options
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| appETagKey | web 应用更新唯一标识字段名 | string | __APP_ETAG__ |
| pollingInterval | 轮询间隔，单位为毫秒，默认为 5 分钟 | number | 5 * 60 * 1000 |
| htmlFileUrl | web 应用网站运行目录 | string | ${location.origin}${location.pathname} |
| silent | 安静模式，为true时，不会进行实时监测 | boolean | false |
| silentPollingInterval | 安静模式，为true时，不做轮询任务 | boolean | false |
| silentPageVisibility | 安静模式，为true时，不做页面可见状态监听 | boolean | false |
| forceUpdate | 强制更新，为true是，取消也会检查更新 | boolean | false |
| onUpdate | 更新检测的回调函数，可以自定义更新的逻辑 | (self) => void | - |