前端项目部署后提醒正在访问的用户刷新页面

3,327 阅读2分钟

背景

  • 大家应该都有遇到过这样一个场景:测试提了个bug,我们修改好后重新部署到环境上了,让测试去测下,测试有时会说,不是,哥们,咋还是有问题呢,你确定处理好了?你可能就会说,刷新下页面再试下呢。刷新,okok,可以了。
  • 但是像在正式环境,客户正在访问我们网站的时候,这时我们重新部署了一个版本上去,那必然不可能打电话去通知每一个客户,我们网站升级了版本哦,你要重新刷新一下网站哦,哈哈
  • so,在重新部署项目后,友好提醒正在访问网站的用户刷新网站,更新版本是非常有必要的

实现

实现思路

  • 打开网站、或刷新网站时,读取网站资源的Etag或last-modify信息,使用临时变量存储,这命名为preTag
  • 设置一个定时器,每间隔多少秒,重新 读取取网站资源的Etag或last-modify信息,这命名为curTag
  • 对比preTag和curTag;如果不相等,则弹出提示信息,提醒用户有版本更新,请用户刷新页面

image.png

代码实现

  • 创建文件:src/utils/version-upgrade.ts
import { ElNotification } from "element-plus";

const LOOPER_TIME = 5 * 1000; // 检测版本更新的轮训时间

let preTag: string | null; // 用于记录初次进入网站或网站被刷新时的Etag信息

if (process.env.NODE_ENV !== "development") {
  // 只在生成环境生效
  (async () => {
    preTag = await getTag();

    // 每隔一段时间获取一遍网站的etag信息,与preTag做对比,如果不一样,则证明有版本更新
    const interval = setInterval(async () => {
      const curTag = await getTag();
      if (preTag !== curTag) {
        showNotification();
        clearInterval(interval);
      }
    }, LOOPER_TIME);
  })()
}

/**
 * 检测到版本更新后,notification会一直显示在页面上
 */
function showNotification(): void {
  ElNotification({
    showClose: false,
    duration: 0,
    title: "版本更新提示",
    dangerouslyUseHTMLString: true,
    message:
      "检测到有新版本发布,请<a href='javascript:location.reload()'>刷新</a>页面",
  });
}

/**
 * 获取网站资源的Etag信息
 *
 * @returns 网站资源的Etag信息
 */
async function getTag(): Promise<string | null> {
  const response = await fetch(window.location.origin, {
    method: "HEAD", // 用于获取资源的元数据,与GET请求类似,HEAD请求也像服务器发送请求,但服务器只需要回传资源的头部信息,不需要回传资源的实体主体。
    cache: "no-cache",
  });
  return response.headers.get("Etag") || response.headers.get("last-modified");
}

然后在main.ts中引入

import '@/utils/version-upgrade.ts'

结尾

好的,以后修改了测试提的bug单以后,

  • 测试:咋还是有问题呢,没解决啊;
  • 我:右上角的提醒刷新页面你没看到没吗
  • 测试:看到了,已经刷新过了啊
  • 我:emmm。。。大脑急转,这次得找什么理由来应对