需求
前端项目打包更新,希望能实时对正在停留于项目的用户发出对应的更新刷新提示,避免用户停留旧版本无法实时看到新功能甚至出现bug。
解决
查阅相关资料都推荐采取前端轮询检查文件的etag值,对比是否有更改。刚好发现有兄弟已经将其写成第三方库,刚好当一会白嫖党~
因为我的项目是vue+nginx,所以我可以自行完成所有的配置。
首先,安装相关依赖:
npm install version-polling --save
然后在main.ts/js中引入,并经过vite(webpack)进行打包:
// 在应用入口文件中使用: 如 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('有新版本,请刷新页面');
},
});
同时官网提示也可以直接在index.html中通过script标签直接引入(我没试过该方法):
<!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>
VersionPolling.createVersionPolling({
appETagKey: "__APP_ETAG__",
pollingInterval: 5 * 1000,
onUpdate: (self) => {
// 当检测到有新版本时,执行的回调函数,可以在这里提示用户刷新页面
const result = confirm("页面有更新,点击确定刷新页面!");
if (result) {
self.onRefresh();
} else {
self.onCancel();
}
},
});
</script>
</body>
</html>
注意,以下是我的nginx配置:
主要的配置就是加入缓存配置和etag更改
location /rdsbackup {
add_header Cache-Control no-cache; # 加上这个响应头,表示协商缓存,解决了静态资源修改后不更新的问题
etag on; # 每次更改etag
root html/;
index index.html;
try_files $uri $uri/ /rdsbackup/index.html;
}
以上都完成后,打包一份dist丢进nginx,重启访问项目,此时并未有任何变化;接着重新打包项目,丢进nginx,重启,回到页面不做任何刷新操作,发现页面已经主动alert更新提示。