前言
该方法并不是唯一的方法,虽然是轮询请求该方法 但是对服务器并没有压力,可以忽略不计。这样在每次前端更新代码之后 直接部署 用户就可以自动提示页面已经更新 需要自动刷新。并且提示的样式可以根据自己需要进行更改。
一. 创建一个工具类 auto-update.js 文件
/**
* 轮询
* 生产环境更新 自动提示用户刷新
*/
let lastSrcs; // 上一次获取到的script地址
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
/**
* 获取最新页面中script链接
*/
async function extractNewScripts() {
const html = await fetch('/?_timestamp=' + Date.now()).then((resp) => {
resp.text();
});
scriptReg.lastIndex = 0;
let result = [];
let match;
while((match = scriptReg.exec(html))) {
result.push(match.groups.src);
}
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(let i = 0; i < lastSrcs.length; i++) {
if(lastSrcs[i] !== newScripts[i]) {
result = true;
break;
}
}
lastSrcs = newScripts;
return result;
}
const DURATION = 6000;
function autoRefresh() {
setTimeout(async () => {
const willUpdate = await needUpdate();
if(willUpdate) {
const result = confirm('页面有更新,点击确认刷新页面');
if(result) {
location.reload();
}
}
autoRefresh();
}, DURATION);
}
autoRefresh();
二. 在man.js 中 引入该工具类
import './../src/utils/auto-update';