【前端页面更新实时提示】

lxf_0328

已于 2023-10-30 15:35:16 修改

阅读量169

点赞数 1

文章标签：前端 vue

于 2023-10-30 15:34:07 首次发布

本文链接：https://blog.csdn.net/lxf_0328/article/details/134120090

版权

需求

前端项目打包更新，希望能实时对正在停留于项目的用户发出对应的更新刷新提示，避免用户停留旧版本无法实时看到新功能甚至出现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更新提示。

在这里插入图片描述

参考链接：
[1]:https://mp.weixin.qq.com/s/wfiz2opelcfa_wsAc8i1CQ

lxf_0328

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端页面更新实时提示】

前端项目打包更新，希望能实时对正在停留于项目的用户发出对应的更新刷新提示，避免用户停留旧版本无法实时看到新功能甚至出现bug。查阅相关资料都推荐采取前端轮询检查文件的etag值，对比是否有更改。刚好发现有兄弟已经将其写成第三方库，刚好当一会白嫖党~因为我的项目是vue+nginx，所以我可以自行完成所有的配置。
复制链接

扫一扫