迭代开发阶段如何实时查看Service Worker的更新变化

• 优先开启Workbox相关集成工具的开发模式：如果使用Workbox CLI、webpack/vite的Workbox插件，将mode参数设置为development，同时选择injectManifest模式而非全量生成的generateSW模式。该模式会自动关闭生产环境才需要的预缓存哈希校验、SW压缩等耗时流程，不需要每次全量执行npm run build生成预缓存清单。
• 拆分SW的编译逻辑：不要把Service Worker的构建流程和全量生产构建绑定，单独给SW配置esbuild/swc的快速编译规则，单次增量编译耗时基本在100ms以内。如果使用vite-plugin-pwa，直接开启devOptions.enabled = true，开发阶段会自动托管SW文件，原生支持热更新，完全不需要跑构建命令。
• 配置浏览器自动更新SW：打开Chrome DevTools > Application > Service Workers面板，勾选Update on reload选项，每次页面刷新时浏览器会自动拉取最新的SW文件，检测到变更后直接触发更新流程，不需要手动卸载旧SW。
• 开发环境新增自动激活逻辑：在SW源码中加入以下代码，新SW安装完成后直接跳过等待、接管所有打开的页面，不需要等待旧SW控制的标签页全部关闭：

if (process.env.NODE_ENV === 'development') {
  self.addEventListener('install', () => self.skipWaiting())
  self.addEventListener('activate', () => self.clients.claim())
}

按照以上配置调整后，修改SW文件后只需要刷新页面即可看到变更，不需要执行全量构建流程。

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