如何解决Service Worker缓存导致旧Vue应用无法被新应用替换的问题？

你写的注销代码可行性 #

你给出的注销Service Worker并跳转的思路是可行的，但需要完善循环处理所有注册实例，避免遗漏：

(async function () {
  if ('serviceWorker' in navigator) {
    const registrations = await navigator.serviceWorker.getRegistrations();
    // 循环注销当前域名下所有Service Worker注册
    for (const registration of registrations) {
      await registration.unregister();
    }
    // 用replace避免用户通过返回键回到旧页面
    window.location.replace('https://home.example.com');
  } else {
    // 不支持Service Worker的环境直接跳转
    window.location.replace('https://home.example.com');
  }
})();

必须彻底移除所有Service Worker——只要有残留的Worker，它就会继续拦截请求、返回旧缓存内容，导致跳转或更新失效。

Vue + vite-plugin-pwa场景的更优实现 #

因为旧应用用了vite-plugin-pwa的零配置模式，除了前端注入注销代码，还可以配合插件配置加速Worker淘汰：

1. 修改vite-plugin-pwa配置，生成自注销的Service Worker
   在vite.config.js中调整配置，让新发布的Worker主动清理缓存并自我注销：

   import { VitePWA } from 'vite-plugin-pwa';
   
   export default {
     plugins: [
       VitePWA({
         registerType: 'autoUpdate',
         workbox: {
           // 清空运行时缓存策略，强制请求最新资源
           runtimeCaching: [],
           skipWaiting: true,
           clientsClaim: true,
           // 自动清理过期缓存
           cleanupOutdatedCaches: true,
           // 给根路径设置最新revision，触发Worker更新
           additionalManifestEntries: [
             { url: '/', revision: Date.now().toString() }
           ]
         },
         // 切换为自定义Worker模式，注入自注销逻辑
         strategies: 'injectManifest',
         srcDir: 'src',
         filename: 'sw.js',
         injectRegister: 'auto'
       })
     ]
   };
   

   然后在src/sw.js中添加激活后自注销的逻辑：

   self.addEventListener('activate', async () => {
     // 激活后立即注销当前Service Worker
     await self.registration.unregister();
     // 强制所有打开的旧页面刷新，触发跳转逻辑
     const clients = await self.clients.matchAll({ type: 'window' });
     clients.forEach(client => client.navigate(client.url));
   });
   

2. 在应用入口注入跳转逻辑
   在旧应用的main.js最顶部插入之前完善的注销+跳转代码，确保页面一加载就执行，避免被Service Worker拦截后无法运行。

完整迁移步骤 #

1. 恢复DNS：example.com指向旧应用服务器，home.example.com指向新应用服务器；
2. 发布旧应用的更新版本：包含上述Service Worker配置修改和前端跳转代码；
3. 等待3-4周（覆盖大部分老用户的访问频率），确保老用户的浏览器都执行了注销并跳转到新域名；
4. 最后将example.com的DNS指向新应用服务器，完成迁移。

内容的提问来源于stack exchange，提问作者Doron Zavelevsky