为了解决后端部署之后，如何通知用户系统有新版本，并引导用户刷新页面以加载最新资源的问题。
实现原理
1.使用 Web Worker API 在浏览器后台轮询请求页面，不会影响主线程运行。
2.命中协商缓存，对比本地和服务器请求响应头etag字段值。
3.如果etag值不一致，说明有更新，则弹出更新提示，并引导用户手动刷新页面（例如弹窗提示），完成应用更新。
4.当页面不可见时（例如切换标签页或最小化窗口），停止实时检测任务；再次可见时（例如切换回标签页或还原窗口），恢复实时检测任务。
本地项目安装
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('有新版本，请刷新页面');},
});
通过 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>
注意事项
version-polling 需要在支持 web worker 和 fetchAPI 的浏览器中运行，不支持 IE 浏览器
version-polling 需要在 web 应用的入口文件（通常是 index.html）中引入，否则无法检测到更新
version-polling 需要在 web 应用的服务端配置协商缓存，否则无法命中缓存，会增加网络请求
version-polling 需要在 web 应用的服务端保证每次发版后，index.html 文件的 etag 字段值会改变，否则无法检测到更新
