Gathering detailed insights and metrics for fz-version-polling
Gathering detailed insights and metrics for fz-version-polling
Installations
npm install fz-version-pollingDeveloper Guide
BETA
Typescript
Yes
Module System
ESM, UMD
Min. Node Version
>=14
Node Version
16.15.0
NPM Version
8.5.5
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.0.2
Package Id
fz-version-polling@0.0.2
Unpacked Size
27.97 kB
Size
7.74 kB
File Count
16
NPM Version
8.5.5
Node Version
16.15.0
Published on
May 10, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
fz-version-polling
实时检测 web 应用更新
前言
fz-version-polling 是一个轻量级的 JavaScript 库，它可以实时检测 web 应用的 index.html 文件内容是否有变化。当服务端发布新版本后，前端会自动弹出更新提示，让用户刷新页面，以加载最新的资源和功能。这样可以提高用户体验和数据准确性。
设计目的
为了解决后端部署之后，如何通知用户系统有新版本，并引导用户刷新页面以加载最新资源的问题。
适用场景
用户在浏览器中打开某 web 应用（通常是后台管理系统）很长时间且未刷新页面时，如果应用有新功能添加或问题修复，用户可能无法及时知道有新版发布。这样会导致用户继续使用旧版，影响用户体验和数据准确性，甚至出现程序报错。
功能特性
- 针对前端 web 单页应用而设计
- 纯前端技术实现，使用简单，不需要后端支持
- 支持 TypeScript
实现原理
- 使用
Web WorkerAPI 在浏览器后台轮询请求页面，不会影响主线程运行。 - 命中协商缓存，对比本地和服务器请求响应头
etag字段值。 - 如果
etag值不一致，说明有更新，则弹出更新提示，并引导用户手动刷新页面（例如弹窗提示），完成应用更新。 - 当页面不可见时（例如切换标签页或最小化窗口），停止实时检测任务；再次可见时（例如切换回标签页或还原窗口），恢复实时检测任务。
浏览器兼容性
适用于支持原生 ES 模块的现代浏览器，具体可参考以下 browserslist 配置
defaults and supports es6-module
maintained node versions
安装
1# 本地项目安装 2npm install fz-version-polling --save
使用
- 通过 npm 引入，并通过构建工具进行打包
1// 在应用入口文件中使用: 如 main.js, app.jsx 2import { createVersionPolling } from "fz-version-polling"; 3 4createVersionPolling({ 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});
- 通过 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/fz-version-polling/dist/fz-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，类似于百度统计那种用法，具体代码参考examples/static-html-app目录下
API
Options
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| appETagKey | web 应用更新唯一标识字段名 | string | __APP_ETAG__ |
| pollingInterval | 轮询间隔，单位为毫秒，默认为 5 分钟 | number | 5 * 60 * 1000 |
| immediate | 初始化后, 立即触发实时监测 | boolean | true |
| htmlFileUrl | web 应用网站运行目录 | string | ${location.origin}${location.pathname} |
| silent | 安静模式，为true时，不会进行实时监测 | boolean | false |
| onUpdate | 更新检测的回调函数，可以自定义更新的逻辑 | (self) => void | - |
注意事项
- fz-version-polling 需要在支持 web worker 和 fetchAPI 的浏览器中运行，不支持 IE 浏览器
- fz-version-polling 需要在 web 应用的入口文件（通常是 index.html）中引入，否则无法检测到更新
- fz-version-polling 需要在 web 应用的服务端配置协商缓存，否则无法命中缓存，会增加网络请求
- fz-version-polling 需要在 web 应用的服务端保证每次发版后，index.html 文件的 etag 字段值会改变，否则无法检测到更新
No vulnerabilities found.
No security vulnerabilities found.