Vue应用新版本部署自动检测实现方案咨询

一、核心结论 #

可以通过Service Worker实现Web应用版本更新的自动检测，其核心利用浏览器对Service Worker脚本的缓存更新机制：当浏览器检测到Service Worker脚本存在字节级变化时，会自动触发更新流程，结合缓存版本管理即可实现完整的版本检测与更新逻辑。

二、具体实现步骤 #

1. 给Service Worker添加版本标识 #

部署新版本时，必须修改Service Worker脚本的内容（比如新增版本号变量），或给脚本文件名添加哈希后缀（如sw.abc123.js），确保浏览器能识别到文件变化。

示例sw.js中的版本标识：

const CACHE_VERSION = 'v2';
const CACHE_NAME = `app-cache-${CACHE_VERSION}`;

2. 主应用中监听Service Worker更新 #

在应用入口脚本（如main.js）中注册Service Worker，并监听updatefound事件捕捉新版本：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      
      // 监听新版本Service Worker的安装
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        
        newWorker.addEventListener('statechange', () => {
          // 新Worker安装完成后，提示用户更新
          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
            alert('应用有新版本可用，请刷新页面！');
            // 若需自动更新，可发送消息让Worker跳过等待直接激活
            // newWorker.postMessage({ type: 'SKIP_WAITING' });
          }
        });
      });
    } catch (error) {
      console.error('Service Worker注册失败:', error);
    }
  });
}

3. Service Worker中处理缓存更新与激活 #

在sw.js中完成新资源缓存、旧缓存清理，并支持主动激活：

// 安装事件：缓存新版本资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.js',
        '/styles.css'
        // 其他需缓存的资源列表
      ]);
    })
  );
  // 跳过等待，直接激活新Worker
  self.skipWaiting();
});

// 激活事件：清理旧版本缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter(name => !name.includes(CACHE_VERSION))
                  .map(name => caches.delete(name))
      );
    })
  );
  // 接管所有已打开的页面
  self.clients.claim();
});

// 监听页面消息，触发跳过等待逻辑
self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

4. 部署注意事项 #

• 给Service Worker脚本设置Cache-Control: no-cache响应头，避免浏览器缓存旧脚本导致无法检测更新。
• 每次部署必须修改Service Worker的内容或文件名哈希，否则浏览器不会触发更新流程。

三、非Service Worker替代方案 #

若无需使用Service Worker，可通过以下两种方式实现版本检测：

1. 版本文件对比法 #

• 在服务器根目录放置version.json文件，内容为当前版本：{"version": "v2"}。
• 应用启动或定时请求该文件，与本地存储的版本号对比：

async function checkForUpdate() {
  try {
    const res = await fetch('/version.json');
    const { version } = await res.json();
    const localVersion = localStorage.getItem('app_version') || 'v1';
    
    if (version !== localVersion) {
      alert('应用有新版本可用，请刷新页面！');
      localStorage.setItem('app_version', version);
    }
  } catch (err) {
    console.error('版本检测失败:', err);
  }
}

// 页面加载时检测
window.addEventListener('load', checkForUpdate);
// 每30分钟定时检测
setInterval(checkForUpdate, 30 * 60 * 1000);

2. 资源哈希对比法 #

• 构建应用时给静态资源（如main.js）添加哈希后缀（如main.abc123.js），并生成资源清单文件。
• 应用启动时请求清单文件，对比本地缓存的清单内容，若有差异则提示更新。

内容的提问来源于stack exchange，提问作者Nadun Sanjeevana