通过版本号控制强制刷新浏览器或清空浏览器缓存

背景介绍

在我们做 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(); // 清除所有的缓存数据// 第二步：清除所有的cookieconst 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 为我项目中的数据字典，你可根据你项目中的数据字典进行合理替换，不用单独跟我一样创建一张表。
此表主要有三个控制机制：

1. 此功能的全局开关：validstatus （1-开启，0-关闭）
2. value：版本号，若想出发前端刷新或情空缓存，版本号必变
3. att1：是否强制刷新缓存标志，在 value 变更的前提下，若att1 = 0，则只刷新浏览器，若att1 = 1，则 清空浏览器缓存（sessionStorage，cookie）
4. 因为前端的定时器监听时间间隔在秒级别，所以后端要使用 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;
}

效果示例

只刷浏览器效果

清空浏览器缓存效果（会退出登录）