let lastSrcs: any; //上一次获取到的script地址
const scriptReg = /<script.*?type=['"]module['"].*?src=['"](.*?)['"].*?>/g;
/**
* 获取最新页面中的script链接
*/
async function extractNewScript() {
const env = import.meta.env.MODE
if (env !== "production" ) return
const html = await fetch('/?_timestamp=' + Date.now()).then((res) => res.text());
const result:any[] = [];
// let match: any;
scriptReg.lastIndex = 0
const match = scriptReg.exec(html)
if(match)result.push(match[1]);
return result;
}
async function needUpdate() {
const newScripts:any = await extractNewScript();
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 = 10000;
function autoRefresh() {
setTimeout(async () => {
const willUpdate = await needUpdate();
if (willUpdate) {
const result = confirm("页面有更新,点击确定刷新页面");
if (result) {
location.reload();
}
}
autoRefresh();
}, DURATION);
}
autoRefresh()
class 版
// 自动检测更新类
class AutoUpdate {
static SCRIPT_REG = /<script.*?type=['"]module['"].*?src=['"](.*?)['"].*?>/g;// script标签中module属性的正则
static DURATION = 10000; // 10s检测一次
lastSrcs: string = '' //上一次获取到的script地址串
constructor() {
this.init()
}
async extractNewScript() {
const env = import.meta.env.MODE
if (env !== "production") return
const html = await fetch('/?_timestamp=' + Date.now()).then((res) => res.text());
const result: any[] = [];
AutoUpdate.SCRIPT_REG.lastIndex = 0
const match = AutoUpdate.SCRIPT_REG.exec(html)
if (match) result.push(match[1]);
return result;
}
async needUpdate() {
const newScripts: any = await this.extractNewScript()
//第一次保存
if (!this.lastSrcs) {
this.lastSrcs = newScripts;
return false;
}
let result = false;
//长度不一样则有更新
if (this.lastSrcs.length !== newScripts.length) {
result = true;
}
//内容不一样则有更新
for (let i = 0; i < this.lastSrcs.length; i++) {
if (this.lastSrcs[i] !== newScripts[i]) {
result = true;
break;
}
}
//保存最新的
this.lastSrcs = newScripts
return result
}
init() {
setTimeout(async () => {
const willUpdate = await this.needUpdate();
if (willUpdate) {
const result = confirm("页面有更新,点击确定刷新页面");
if (result) location.reload();
}
this.init()
}, AutoUpdate.DURATION)
}
}
new AutoUpdate()
main.ts
import ‘@/utils/auto.update’