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

    前言

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

    设计目的

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

    适用场景

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

    功能特性

    1. 针对前端 web 单页应用而设计

    2. 纯前端技术实现，使用简单，不需要后端支持

    3. 支持 TypeScript

    实现原理

    1. 使用 Web Worker API 在浏览器后台轮询请求页面，不会影响主线程运行。

    2. 命中协商缓存，对比本地和服务器请求响应头etag字段值。

    3. 如果etag值不一致，说明有更新，则弹出更新提示，并引导用户手动刷新页面（例如弹窗提示），完成应用更新。

    4. 当页面不可见时（例如切换标签页或最小化窗口），停止实时检测任务；再次可见时（例如切换回标签页或还原窗口），恢复实时检测任务。

    浏览器兼容性

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

    1. defaults and supports es6-module
    2. maintained node versions

    安装

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

    使用

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

    1. // 在应用入口文件中使用: 如 main.js, app.jsx
    2. import { createVersionPolling } from "version-polling";
    3.  
    4. createVersionPolling({
    5.   appETagKey: "__APP_ETAG__",
    6.   pollingInterval: 5 * 1000, // 单位为毫秒
    7.   silent: process.env.NODE_ENV === "development", // 开发环境下不检测
    8.   onUpdate: (self) => {
    9.     // 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面
    10.     const result = confirm("页面有更新，点击确定刷新页面！");
    11.     if (result) {
    12.       self.onRefresh();
    13.     } else {
    14.       self.onCancel();
    15.     }
    16.     // 强制更新可以用alert
    17.     // alert('有新版本，请刷新页面');
    18.   },
    19. });

    1. 通过 script 引入，直接插入到 HTML，无侵入用法，接入成本最低

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>前端页面自动检测更新-示例</title>
    8.   </head>
    9.   <body>
    10.     <script src="//unpkg.com/version-polling/dist/version-polling.min.js"></script>
    11.     <script>
    12.       VersionPolling.createVersionPolling({
    13.         appETagKey: "__APP_ETAG__",
    14.         pollingInterval: 5 * 1000,
    15.         onUpdate: (self) => {
    16.           // 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面
    17.           const result = confirm("页面有更新，点击确定刷新页面！");
    18.           if (result) {
    19.             self.onRefresh();
    20.           } else {
    21.             self.onCancel();
    22.           }
    23.         },
    24.       });
    25.     </script>
    26.   </body>
    27. </html>

    最佳实践

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

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

    注意事项

    • version-polling 需要在支持 web worker 和 fetchAPI 的浏览器中运行，不支持 IE 浏览器

    • version-polling 需要在 web 应用的入口文件（通常是 index.html）中引入，否则无法检测到更新

    • version-polling 需要在 web 应用的服务端配置协商缓存，否则无法命中缓存，会增加网络请求

    • version-polling 需要在 web 应用的服务端保证每次发版后，index.html 文件的 etag 字段值会改变，否则无法检测到更新

  • 相关阅读:
    分组卷积的思想神了
    使用Boto3访问AWS S3服务
    C语言——求1/1-1/2+1/3-......+1/99-1/100的值
    常用的正则表达式30个，整数、浮点数、中文、英文字母、手机号、邮箱、日期、IP等等（ JavaScript、Java）
    智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型
    Python集成开发环境（IDE）：WingPro for Mac
    RabbitMQ快速入门
    【Linux 源码阅读记录】设备树解析 of 相关代码
    设计模式之工厂模式（学习笔记）
    Redis数据库管理工具Redis Desktop Manager最新中文
  • 原文地址：https://blog.csdn.net/why_1639946449/article/details/134097131