前端页面自动检测更新【version-polling】

最新推荐文章于 2024-01-17 14:10:25 发布

嘴巴嘟嘟

最新推荐文章于 2024-01-17 14:10:25 发布

阅读量1.4k

点赞数 22

文章标签：前端状态模式

本文链接：https://blog.csdn.net/qq_41961239/article/details/134987553

版权

前言

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

设计目的

version-polling 的设计目的是为了解决后端部署之后，如何通知用户系统有新版本，并引导用户刷新页面以加载最新资源的问题。通过实时监测页面内容变化并弹出更新提示，用户可以及时获知新版本发布，并完成应用更新，从而提升用户体验和数据准确性。

适用场景

version-polling 适用于用户长时间未刷新页面的 web 应用场景，特别是后台管理系统。在用户长时间未刷新页面的情况下，如果应用有新功能添加或问题修复，version-polling 可以及时通知用户有新版本发布，并引导用户刷新页面以加载最新资源，从而避免影响用户体验和数据准确性。

功能特性

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

实现原理

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

浏览器兼容性

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

defaults and supports es6-module
maintained node versions

安装

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

使用

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

// 在应用入口文件中使用: 如 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>
    	// 示例代码
		// 创建一个版本检测实例
		const versionPolling = new VersionPolling();
		// 启动版本检测
		versionPolling.start();
		
		// 监听版本变化事件
		versionPolling.onVersionChange((newVersion) => {
		  // 弹出更新提示
		  alert(`发现新版本 ${newVersion}，请刷新页面以加载最新资源`);
		});
    </script>
  </body>
</html>

最佳实战

在项目 index.html 下直接插入 script，类似于百度统计那种用法，具体代码参考:https://github.com/JoeshuTT/version-polling

API

Options

参数	说明	类型	默认值
appETagKey	web 应用更新唯一标识字段名	`string`	`__APP_ETAG__`
pollingInterval	轮询间隔，单位为毫秒，默认为 5 分钟	`number`	`5 * 60 * 1000`
htmlFileUrl	web 应用网站运行目录	`string`	`${location.origin}${location.pathname}`
silent	安静模式，为`true`时，不会进行实时监测	`boolean`	`false`
silentPollingInterval	安静模式，为`true`时，不做轮询任务	`boolean`	`false`
silentPageVisibility	安静模式，为`true`时，不做页面可见状态监听	`boolean`	`false`
forceUpdate	强制更新，为`true`是，取消也会检查更新	`boolean`	`false`
onUpdate	更新检测的回调函数，可以自定义更新的逻辑	`(self) => void`	-

注意事项

version-polling 需要在支持 web worker 和 fetchAPI 的浏览器中运行，不支持 IE 浏览器
version-polling 需要在 web 应用的入口文件（通常是 index.html）中引入，否则无法检测到更新
version-polling 需要在 web 应用的服务端配置协商缓存，否则无法命中缓存，会增加网络请求
version-polling 需要在 web 应用的服务端保证每次发版后，index.html 文件的 etag 字段值会改变，否则无法检测到更新

嘴巴嘟嘟

关注

22
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端页面自动检测更新【version-polling】

是一个轻量级的 JavaScript 库，旨在解决 web 应用中版本更新提示和自动刷新页面的问题。通过实时检测 web 应用的index.html文件内容变化，当服务端发布新版本后，前端会自动弹出更新提示，让用户刷新页面以加载最新的资源和功能，从而提高用户体验和数据准确性。
复制链接

扫一扫