一个用于实时检测 web 应用更新的 JavaScript 库

概述

在现代 web 应用开发中，前端代码的更新频率较高，尤其是单页应用（SPA）。当应用发布新版本时，如何及时通知用户并引导其刷新页面以加载最新资源，成为了一个亟待解决的问题。version-polling 库应运而生，旨在提供一种简单高效的方式来检测前端应用的版本更新，并提示用户进行页面刷新。官网

适用场景

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

功能特性

针对前端 web 单页应用（SPA）而设计
纯前端技术实现，使用简单无需后端支持
提供三种版本控制方式
1. 使用 HTTP ETag 作为版本标识符
2. 使用 chunkHash 作为版本标识符 v1.3.0
3. 使用 version.json 文件管理版本号 v1.3.0
支持 TypeScript

浏览器兼容性

适用于支持原生 ES Modules 的浏览器

复制代码

chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

安装

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

bash 复制代码

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

通过 CDN 方式引入，直接插入到 HTML

html 复制代码

<script src="https://unpkg.com/version-polling/dist/version-polling.min.js"></script>

使用参考前端静态 HTML 页面自动检测更新示例

使用示例

新建一个名为 autoUpdate.js

js 复制代码

// autoUpdate.js
// 在应用入口文件中使用: 如 main.js, app.jsx
import { createVersionPolling } from "version-polling";

createVersionPolling({
  eventTriggerList: ["myAutoUpdateEvent"],
  silent: process.env.NODE_ENV === "development", // 开发环境下不检测
  onUpdate: (self) => {
    // const result = confirm('页面有更新，点击确定刷新页面！');
    // if (result) {
    self.onRefresh();
    // } else {
    // 	self.onCancel();
    // }
  },
});

// 在需要检测更新的页面中触发事件
// 路由跳转后执行
router.afterEach((to, from) => {
  // 监听到服务端前端站点更新了，执行页面刷新
  dispatchEvent(new CustomEvent("myAutoUpdateEvent"));

  // 处理生命体征不在生命体体征模块时，返回首页或者进入系统配置是去除本地缓存，然后进入体征总览执行相关的操作
  if (to.path?.indexOf(signSystemFlag) === -1) {
    sessionStorage.removeItem("vitalSign_manualGetData");
  }
});