前端页面自动检测更新解决方案 【version-polling】

来介绍一下我写的 version-polling，一个用于实时检测 web 应用更新的 JavaScript 库。文档内容是通过NewBing润色过的。

前言

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

设计目的

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

适用场景

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

功能特性

• 针对前端 web 单页应用而设计
• 纯前端技术实现，使用简单，不需要后端支持
• 支持 TypeScript

实现原理

1. 使用 Web Worker API 在浏览器后台轮询请求页面，不会影响主线程运行。
2. 命中协商缓存，对比本地和服务器请求响应头etag字段值。
3. 如果etag值不一致，说明有更新，则弹出更新提示，并引导用户手动刷新页面（例如弹窗提示），完成应用更新。
4. 当页面不可见时（例如切换标签页或最小化窗口），停止实时检测任务；再次可见时（例如切换回标签页或还原窗口），恢复实时检测任务。

浏览器兼容性

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

defaults and supports es6-module
maintained