Angular 15 Service Worker重载后卡顿问题咨询与原因排查

1. 问题根因 #

Angular默认Service Worker检测到新版本后，会进入waiting状态，需等所有关联页面关闭才会激活新的Service Worker。你当前的流程是用户确认新版本后直接重载页面，此时旧Service Worker仍在控制页面，新Service Worker未完成激活就被触发重载，导致新旧Service Worker的生命周期冲突，进而引发卡顿。

空项目能正常工作是因为没有额外业务逻辑、缓存依赖的干扰，默认的Service Worker生命周期流程可以顺畅执行。而self.skipWaiting()的作用是让新Service Worker跳过等待立即激活，但Angular默认封装的Service Worker不会自动调用这个方法，你没手动介入的话，就会出现上述冲突问题。

2. 其他服务/代码的bug是否会导致该问题？ #

会的，以下几种场景都可能触发：

• 业务服务在页面unload阶段执行异步操作（如发送统计请求、未完成的API调用），阻塞页面正常卸载，打断Service Worker的激活流程；
• 第三方脚本（埋点、广告SDK等）篡改了Service Worker的生命周期事件，干扰Angular Service Worker的默认激活逻辑；
• 自定义缓存规则与ngsw-config.json的默认配置冲突，重载时新旧缓存交替加载，导致Service Worker处理缓存时出现卡顿；
• 页面存在内存泄漏（如未销毁的订阅、全局变量残留），重载时残留进程与Service Worker激活流程竞争资源，引发状态异常。

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