背景
- 大家应该都有遇到过这样一个场景:测试提了个bug,我们修改好后重新部署到环境上了,让测试去测下,测试有时会说,不是,哥们,咋还是有问题呢,你确定处理好了?你可能就会说,刷新下页面再试下呢。刷新,okok,可以了。
- 但是像在正式环境,客户正在访问我们网站的时候,这时我们重新部署了一个版本上去,那必然不可能打电话去通知每一个客户,我们网站升级了版本哦,你要重新刷新一下网站哦,哈哈
- so,在重新部署项目后,友好提醒正在访问网站的用户刷新网站,更新版本是非常有必要的
实现
实现思路
- 打开网站、或刷新网站时,读取网站资源的Etag或last-modify信息,使用临时变量存储,这命名为preTag
- 设置一个定时器,每间隔多少秒,重新 读取取网站资源的Etag或last-modify信息,这命名为curTag
- 对比preTag和curTag;如果不相等,则弹出提示信息,提醒用户有版本更新,请用户刷新页面
代码实现
- 创建文件: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。。。大脑急转,这次得找什么理由来应对