解决前端部署之后,通知用户系统有新版本【version-polling】

设计目的

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

适用场景

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

实现原理

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

安装使用

js 复制代码
npm install version-polling --save

使用

这里只提供npm 依赖构建用法,也可以通过 script 引入,直接插入到 HTML

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

createVersionPolling({
  appETagKey: "__APP_ETAG__",
  pollingInterval: 5 * 60 * 1000, // 单位为毫秒-默认5分钟轮询一次
  silent: process.env.NODE_ENV === "development", // 开发环境下不检测
  onUpdate: (self) => {
    // 当检测到有新版本时,执行的回调函数,可以在这里提示用户刷新页面
    const result = confirm("页面有更新,点击确定刷新页面!");
    if (result) {
      self.onRefresh();
    } else {
      self.onCancel();
    }
    // 强制更新可以用alert
    // alert('有新版本,请刷新页面');
  },
})

详细参数

参数 说明 类型 默认值
appETagKey web 应用更新唯一标识字段名 string APP_ETAG
pollingInterval 轮询间隔,单位为毫秒,默认为 5 分钟 number 5 * 60 * 1000
immediate 初始化后, 立即触发实时监测 boolean true
htmlFileUrl web 应用网站运行目录 string {location.origin}{location.pathname}
silent 初始化后, 立即触发实时监测 boolean true
onUpdate 更新检测的回调函数,可以自定义更新的逻辑 (self) => void -

version-polling npm官方文档

相关推荐
herogus丶2 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder5 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者8 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder9 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder9 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806924 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说44 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js