前端项目部署后的自动更新机制及用户通知
部署前端项目后，如何有效地检测更新并通知用户？ 核心问题在于浏览器缓存静态资源（包括JavaScript文件）导致新版本 main.js 入口文件无法自动执行。
解决方法：
一种常见方案是利用版本哈希值来区分不同版本的 main.js 文件。例如，在引用 main.js 时添加版本号：main.v12345.js。 但这并不能完全解决问题，因为浏览器可能仍然缓存了旧版本的脚本。
立即学习“前端免费学习笔记（深入）”；
更可靠的方案是使用 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 需要替换成你项目中使用的弹窗组件。
