自动检查更新

在我们单页面应用(Vue/React等)中，经常出现项目重新打包发布服务器，而此时用户正在访问页面，打包发布后由于用户本地缓存缓存了站点静态资源数据，所有用户还可以正常使用。如何检测并通知正在使用站点的用户站点已经重新发布了。

原理：

项目每次打包后都会在根目录生成一个index.html的文件，项目打包过程中构建工具会动态的在index.html文件中引入带有唯一指纹值的***[指纹].js，项目中可以循环调用/这个接口拿到index.html的文本内容，调用的结果进行对比。

实现代码：

let oldHtml // 上一次获取到的的html

async function needUpdate () {
  const newHtml = await fetch('/index.html?_timestamp=' + +new Date()).then((res) => res.text())
  if (!oldHtml) {
    oldHtml = newHtml
    return false
  }
  let result = false
  if (oldHtml !== newHtml) {
    result = true
  }
  oldHtml = newHtml
  return result
}

const DURATION = 3000
function autoRefresh () {
  setTimeout(async () => {
    const willUpdate = await needUpdate()
    if (willUpdate) {
      const result = confirm('页面有更新，点击确定刷新页面')
      if (result) {
        location.reload()
      }
    }
    autoRefresh()
  }, DURATION)
}

autoRefresh()