前端如何检测新版本，并提示用户去刷新

前端如何检测新版本，并提示用户去刷新

先看效果

原理

通过轮询index.html文件的内容来计算文件的哈希值前后是否发生了变化

前端工程化的项目中，以Vue为例，webpack或vite打包通常会构建为很多的js、css文件，每次构建都会根据内容生成唯一的哈希值。如下图所示。

大家可以动手试试，观察一下。

每次构建完index.html中script或link标签引用的地址发生了变化。

代码实现

以Vue+ElementPlus项目为例。在入口文件中引入此文件即可。

// check-version.ts
// 封装了storage，粗暴一点可以用 sessionStorage 代替
import { Storage } from "@/utils/storage";
import { ElLink, ElNotification, ElSpace } from "element-plus";
import { h } from "vue";
import CryptoJS from 'crypto-js';

const storage = new Storage('check-version', sessionStorage);
const APP_VERSION = 'app-version';
let notifyInstance: any;

const generateHash = (text: string): string => CryptoJS.SHA256(text).toString();

const getAppVersionHash = async () => {
  const html = await fetch(`${location.origin}?t=${Date.now()}`).then(res => res.text());
  const newHash = generateHash(html);
  const oldHash = storage.get(APP_VERSION);
  return { newHash, oldHash };
}

const checkVersion = async () => {
  const { newHash, oldHash } = await getAppVersionHash()
  if (oldHash !== newHash) {
    if (notifyInstance) return;
    notifyInstance = ElNotification({
      title: '版本更新',
      message: h(ElSpace, null, () => [
        h('span', '检测到新版本发布！'),
        h(ElLink, { type: 'primary', onClick: () => location.reload() }, () => '立即刷新')
      ]),
      position: 'top-right',
      duration: 0,
      onClose: () => {
        notifyInstance = null
      }
    })
  }
}

const loopCheck = (ms: number) => {
  setTimeout(async () => {
    await checkVersion()
    loopCheck(ms)
  }, ms)
}

document.addEventListener('DOMContentLoaded', async () => {
  console.log("The DOM is fully loaded and parsed.");

  const { newHash } = await getAppVersionHash();
  storage.set(APP_VERSION, newHash, null);

  loopCheck(1000 * 30);
});