前端线上部署，如何通知用户有新版本

version-polling 是一个轻量级的 JavaScript 库，它可以实时检测 web 应用的 index.html 文件内容是否有变化。当服务端发布新版本后，前端会自动弹出更新提示，让用户刷新页面，以加载最新的资源和功能。这样可以提高用户体验和数据准确性。

为了解决后端部署之后，如何通知用户系统有新版本，并引导用户刷新页面以加载最新资源的问题。

用户在浏览器中打开某 web 应用（通常是后台管理系统）很长时间且未刷新页面时，如果应用有新功能添加或问题修复，用户可能无法及时知道有新版发布。这样会导致用户继续使用旧版，影响用户体验和数据准确性，甚至出现程序报错。

适用于支持原生 ES 模块的现代浏览器，具体可参考以下 browserslist 配置

defaults and supports es6-module
maintained node versions

# 本地项目安装
npm install version-polling --save

通过 npm 引入，并通过构建工具进行打包

// 在应用入口文件中使用: 如 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('有新版本，请刷新页面');
},
});
通过 script 引入，直接插入到 HTML，无侵入用法，接入成本最低
<!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> VersionPolling.createVersionPolling({ appETagKey: "__APP_ETAG__", pollingInterval: 5 * 1000, onUpdate: (self) => { // 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面 const result = confirm("页面有更新，点击确定刷新页面！"); if (result) { self.onRefresh(); } else { self.onCancel(); } }, }); </script> </body> </html>

在项目 index.html 下直接插入 script，类似于百度统计那种用法，具体代码参考:

https://github.com/JoeshuTT/version-polling