前端项目部署后的自动更新机制及用户通知

部署前端项目后，如何有效地检测更新并通知用户？ 核心问题在于浏览器缓存静态资源（包括JavaScript文件）导致新版本 main.js 入口文件无法自动执行。

解决方法：

一种常见方案是利用版本哈希值来区分不同版本的 main.js 文件。例如，在引用 main.js 时添加版本号：main.v12345.js。 但这并不能完全解决问题，因为浏览器可能仍然缓存了旧版本的脚本。

立即学习“前端免费学习笔记（深入）”；

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

更可靠的方案是使用 Web Worker 定期检查更新。

利用 Web Worker 实现自动更新检测

Web Worker 允许在后台线程运行 JavaScript 代码，避免阻塞主线程，从而实现高效的更新检测。

以下是一个示例：

// main.js
try {
  const worker = new Worker(new URL('./utils/autoupdate.ts', import.meta.url), { type: 'module' });

  worker.postMessage({ url: `${window.location.protocol}//${window.location.host}` });

  worker.onmessage = (e) => {
    if (e.data === 1) {
      // 使用合适的UI组件库弹窗提示用户更新
      elmessagebox.alert('新版本已上线，请刷新页面', {
        confirmbuttontext: '刷新',
        showclose: false,
        callback: () => {
          window.location.reload();
        },
      });
    }
  };
} catch (err) {
  console.error('Web Worker 初始化失败:', err);
}

// utils/autoUpdate.ts
let previousTimeTag: string | null;
let url: string;
let intervalTimer: number;

async function getTimeTag() {
  const res = await fetch(url, { method: 'HEAD', cache: 'no-cache' });
  return res.headers.get('etag') || res.headers.get('last-modified');
}

async function checkUpdate() {
  const currentTimeTag = await getTimeTag();
  console.log('currentTimeTag:', currentTimeTag, 'previousTimeTag:', previousTimeTag);

  if (currentTimeTag !== previousTimeTag) {
    clearInterval(intervalTimer);
    self.postMessage(1); // 向主线程发送更新消息
  }
}

self.onmessage = (e) => {
  const { url } = e.data;
  if (url) {
    (async () => {
      previousTimeTag = await getTimeTag();
      intervalTimer = setInterval(checkUpdate, 300000); // 每5分钟检查一次更新 (5 * 60 * 1000)
    })();
  } else {
    console.log('Worker 收到无效消息:', e.data);
  }
};

此方案中，Web Worker 定期（例如，每5分钟）检查服务器端资源的 etag 或 last-modified 头信息，若发现版本变更，则向主线程发送消息，触发更新提示并引导用户刷新页面。 请根据实际情况调整更新检查的频率。 elmessagebox 需要替换成你项目中使用的弹窗组件。