自动检查更新
在我们单页面应用(
Vue
/React
等)中,经常出现项目重新打包发布服务器,而此时用户正在访问页面,打包发布后由于用户本地缓存缓存了站点静态资源数据,所有用户还可以正常使用。如何检测并通知正在使用站点的用户站点已经重新发布了。
原理:
项目每次打包后都会在根目录生成一个index.html
的文件,项目打包过程中构建工具会动态的在index.html
文件中引入带有唯一指纹值的***[指纹].js
,项目中可以循环调用/这个接口拿到index.html
中的值,调用的结果进行对比。
实现代码:
let lastSrcs; // 上一次获取到的的script地址
const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm;
async function extractNewScripts() {
const html = await fetch('/?_timestamp=' + new Date()).then((res)=>res.text());
scriptReg.lastIndex = 0;
let result = [];
let match;
while ((match = scriptReg.exec(html))){
result.push(match.groups.src);
}
console.log(result);
return result;
}
async function needUpdate(){
const newScripts = await extractNewScripts();
if(!lastSrcs){
lastSrcs = newScripts;
return false;
}
let result = false;
if (lastSrcs.length !== newScripts.length){
result = true
}
for (var i = 0; i < lastSrcs.length; i++) {
if(lastSrcs[i] !== newScripts[i]) {
result = true;
break;
}
}
lastSrcs = newScripts;
return result;
}
const DURATION = 2000;
function autoRefresh(){
setTimeout( async ()=>{
const willUpdate = await needUpdate();
if(willUpdate){
const result = confirm('页面有更新,点击确定刷新页面');
if(result){
location.reload();
}
}
autoRefresh()
}, DURATION);
}
autoRefresh()