背景介绍
在我们做 web 项目时,经常会遇到一个问题就是,需要 通知业务人员(系统用户)刷新浏览器或者清空浏览器 cookie 缓存
的情况。 而对于用户而言,很多人一方面不懂如何操作,另一方面由于执行力问题,很少有人进行这样的操作。进而遇到常见的缓存问题而上报运维问题。 耽误用户的同时,也增加了我们的运维工作量。 甚至有时研发人员还经常吐槽(都告诉他刷新了,怎么就不刷!)
今天,咱们通过简单的几行代码,来实现灵活控制,是否强制提醒并提供便利的操作让业务人员自动执行此操作!
实现原理
- 案例前端代码为 vue 工程代码(其他前端架构原理相同)
- 前端追加一个定时器,定时 N 秒中获取文件/版本号变化情况,来决定是否弹出强制刷新/清缓存提醒。
- 实现手段
- 监听后端打包的前端文件是否发生变化(这个办法不佳,因为控制不够灵活)
- 优点:一劳永逸,只要重新打包发版,就会触发提醒
- 缺点:控制不够灵活,没法针对刷新浏览器与清空缓存分开控制; 并且有时候不需要刷新也会被刷新
- 通过后端提供getVersion 接口,动态返回版本号以及是否清空缓存标识来控制
- 优点:控制更加灵活
- 缺点:后端需要同步提供一个接口配合使用,然后每次通过修改数据字典的版本号来实现。
- 监听后端打包的前端文件是否发生变化(这个办法不佳,因为控制不够灵活)
前端代码
监听文件变化法(不推荐)
此法优缺点详见实现原理介绍,根据自己诉求选择方案。 有的项目有这样的诉求,完全可以用此法。
此法还有一个最大的弊端
- 就是监听生效的前提,必须开启页面并聚焦到当前浏览器上才生效。 如果当前没有聚焦到页面,那么当文件变化后,超过定时器的时间间隔后,并不会生效。
auto-update.js 核心源码
// 发版刷新页面,根据监测上传文件实现刷新
import Data from "xe-utils/date";
let lastSrcs;
//获取到js名字
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
//获取最新页面中的script链接
async function extractNewScripts() {
// _timestamp避免缓存,获取当前时间戳
const html = await fetch('/?_timestamp=' + Data.now()).then((resp) =>
resp.text()
);
scriptReg.lastIndex = 0;
let result = [];
let match;
while ((match = scriptReg.exec(html))) {
result.push(match.groups.src);
}
return result;
}
//进行js文件命名对比
async function needUpdate() {
const newScripts = await extractNewScripts();
if (!lastSrcs) {
lastSrcs = newScripts;
return false;
}
let result = false;
if (lastSrcs.length !== newScripts.length) {
result = true;
}
for (let i = 0; i < lastSrcs.length; i++) {
if (lastSrcs[i] !== newScripts[i]) {
result = true;
break;
}
}
lastSrcs = newScripts;
return result;
}
//每五秒进行一次比对
const DURATION = 5000;
//出现的弹窗里的文字
function autoRefresh() {
setTimeout(async () => {
const willUpdate = await needUpdate();
if (willUpdate) {
const result = confirm('有新功能发布,请点击确定刷新页面!');
if (result) {
location.reload(true);
}
}
autoRefresh();
},DURATION);
}
autoRefresh();
- 在 main.ts(main.js) 里引入auto-update.js
// 页面构建刷新
import './auto-update/auto-update.js';
getVersion 法(推荐)
前端在 App.vue 中追加如下代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlikCEAI-1692003330296)(/tfl/pictures/202308/tapd_32565483_1692001218_668.png)]
下面附上源码
前端追加定时器
created(){
// 定时器,每五秒请求一次接口对比版本号
setInterval(()=>{
this.checkVersion()
}, 5000)
},
前端 checkVersion() 核心源码
checkVersion () {
// 在需要判断登录状态的地方,获取sessionStorage存储的dialogInfo并验证
const dialogInfo = sessionStorage.getItem('dialogInfo');
if (dialogInfo) {
// 已登录时的处理逻辑
// 可以在这里请求接口等操作
axios.get(`/baseCode/getVersion`,{headers: {'Cache-Control': 'no-cache'}}) // 反正就是要请求到json文件的内容, 并且禁止缓存
.then(res => {
// servie版本号
const versionServie = res.data.data.value
// 当前浏览器端缓存的版本号
const clientVersion = localStorage.getItem('_version_')
console.log('当前服务器端servie版本号=', versionServie, ',当前浏览器端缓存的版本号=', clientVersion)
// 和最新版本不同,刷新页面
if (versionServie !== clientVersion) {
if (res.data.data.att1 === '1') {
// 先刷浏览器,再清缓存(sessionStorage,cookie)
const result = confirm('有新功能发布!\n需点击确定自动为您清除浏览器缓存(cookie,sessionStorage)!\n本操作将退出当前登录!');
if (result) {
//将最新的版本号存储到本地
localStorage.setItem('_version_', versionServie)
location.reload(true);
// 第一步:清除sessionStorage中的缓存数据
sessionStorage.clear(); // 清除所有的缓存数据
// 第二步:清除所有的cookie
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
const eqPos = cookie.indexOf('=');
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}
}
} else {
// 只刷新浏览器不清除缓存
const result = confirm('有新功能发布,请点击确定刷新页面!');
if (result) {
localStorage.setItem('_version_', versionServie)
location.reload(true);
}
}
}
else {
//版本号一致不做处理
console.log('版本号一致不做处理')
}
})
.catch(error => {
console.log(error)
})
} else {
// 未登录时的处理逻辑,跳转到登录页面
this.$router.push({ name: 'Login' })
}
},
说明:
1、dialogInfo 用来判断当前登录 session 状态,若已登录则进行后续流程判断
2、/baseCode/getVersion 为后端接口,可根据自己项目情况灵活调整
3、业务逻辑
1)若当前浏览器端缓存的版本号clientVersion
与服务器端返回的版本号versionServie
不一致,则触发提醒机制
2)若强制清空浏览器缓存标志att1
为0
则只触发刷新浏览器
动作
3)若强制清空浏览器缓存标志att1
为1
则触发清空浏览器缓存(sessionStorage,cookie)
动作
4、注意,以上接口结构可根据自己项目架构实际调整,不一定非得跟我的一致,原理就是后端接口返回了两个字段,一个版本号用于控制是否触发校验机制,一个就是是否同步出发清空浏览器缓存标志。 一定要这俩分开控制,因为有的时候只需要刷新浏览器不需要清缓存。
后端 getVersion() 接口
说明
BaseCodeInfo 为我项目中的数据字典,你可根据你项目中的数据字典进行合理替换,不用单独跟我一样创建一张表。
此表主要有三个控制机制:
- 此功能的全局开关:validstatus (1-开启,0-关闭)
- value:版本号,若想出发前端刷新或情空缓存,版本号必变
- att1:是否强制刷新缓存标志,在 value 变更的前提下,若att1 = 0,则只刷新浏览器,若att1 = 1,则 清空浏览器缓存(sessionStorage,cookie)
- 因为前端的定时器监听时间间隔在秒级别,所以后端要使用 redis 缓存存储 value 以及 att1,否则频繁查询数据库,性能会受到影响。这里注意两个点:
1)当 redis 查不到时,兼容查询数据库是否存在,若存在也可以返回结果,并刷新 redis 数据
2)当修改数据字典的值时,同步刷新 redis
getVersion() 接口
/**
* value: 版本号
* att1:是否同步刷新缓存(1-是,0 否);
* <p>
* 1、浏览器缓存版本号与 value 不一致则刷新浏览器;
* 2、若value不一致的同时 att1等于 1 则同步清缓存
*
* @return
*/
public BaseCodeResVO getVersion() {
String value = redisTemplate.opsForValue().get(UPGRADE_VERSION);
BaseCodeResVO baseCodeResVO = null;
if (StringUtils.isNotBlank(value) && value.contains("_")) {
String[] arr = value.split("_");
if (arr.length > 0) {
baseCodeResVO = new BaseCodeResVO();
baseCodeResVO.setCode(UPGRADE_VERSION);
baseCodeResVO.setValue(arr[0]);
baseCodeResVO.setAtt1(arr[1]);
return baseCodeResVO;
}
}
BaseCodeInfo baseCodeInfo = baseCodeInfoDao.selectOne(new QueryWrapper<BaseCodeInfo>().lambda()
.eq(BaseCodeInfo::getType, UPGRADE_VERSION)
.eq(BaseCodeInfo::getValidStatus, ValidStatusEnum.VALID.value()));
if (baseCodeInfo != null) {
log.info("从 redis 获取系统升级版本号失败,请及时跟进!");
baseCodeResVO = new BaseCodeResVO();
baseCodeResVO.setCode(UPGRADE_VERSION);
baseCodeResVO.setValue(baseCodeInfo.getValue());
baseCodeResVO.setAtt1(baseCodeInfo.getAtt1());
String finalValue = baseCodeInfo.getValue() + "_" + baseCodeInfo.getAtt1();
redisTemplate.opsForValue().set(UPGRADE_VERSION, finalValue);
} else {
log.error("获取系统升级版本号失败,value={}", value);
}
return baseCodeResVO;
}