Web 生产环境自动检测更新

原理：获取index.html文档内容，对比与之前的JavaScript链接有没有发生变化；有变化则提示用户。

1、思路详解

1. 获取index.html文档内容，利用正则提取JavaScript外链接；
2. 对比新旧JavaScript外链接；
3. 定时器轮询调用；

// auto-update.js

let lastSrcs; // 上一次获取到的script地址

const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm;

/**
 * 获取最新页面中的script地址
 */
async function extractNewScripts() {
  const html = await fetch("/?_timeestamp=" + 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 = 2000;

function autoRefresh() {
  setTimeout(async () => {
    const willUpdate = await needUpdate();
    if (willUpdate) {
      const result = confirm("检测到页面有更新，是否刷新页面？");
      if (result) {
        location.reload();
      }
    }
    autoRefresh();
  }, DURATION);
}

autoRefresh();

---

2、食用方法

1. 在main.js中引入

// main.js
import "./auto-update";

拓展

• 根据所用组件库，自行拓展美化用户弹窗提醒；