为何Angular 6应用中Lighthouse插件无法识别Service Worker？

别担心，这种情况我碰到过好多次，大概率是这几个常见原因导致的，咱们一步步排查解决：

1. 先确认审计环境是生产环境 #

Angular CLI生成的Service Worker默认只在生产构建中启用，如果你用ng serve启动的开发环境跑Lighthouse，那肯定检测不到——因为开发模式下Service Worker根本不会加载。

解决步骤：

• 先执行生产构建命令：ng build --prod
• 用静态服务器部署构建好的dist文件夹，比如用http-server（先全局安装：npm install -g http-server，再运行http-server dist/ -p 4200）
• 再在这个生产环境的页面上运行Lighthouse审计

2. 检查Angular配置是否正确开启Service Worker #

打开你的angular.json文件，找到对应项目的architect > build > configurations > production节点，确认serviceWorker字段设置为true：

"production": {
  "serviceWorker": true,
  // 其他生产环境配置...
}

如果之前没开启，修改后重新执行ng build --prod再测试。

3. 调整Service Worker的注册时机 #

有些项目会把Service Worker注册逻辑延迟到页面完全加载后（比如绑定window.load事件），但Lighthouse的审计是在页面加载初期的快照中检测，可能会错过注册时机。

检查src/app/app.module.ts里的注册代码，Angular默认的注册配置是这样的：

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  registrationStrategy: 'registerWhenStable:30000'
});

如果你的registrationStrategy设置了过长的延迟，或者自定义了注册逻辑，可以改成立即注册：

registrationStrategy: 'registerImmediately'

这样Service Worker会尽快完成注册，Lighthouse就能检测到了。

4. 确认部署环境的HTTPS配置 #

虽然localhost允许HTTP，但如果你的生产部署在非HTTPS服务器上，Lighthouse会因为安全策略忽略Service Worker（Service Worker要求除localhost外必须在HTTPS环境运行）。如果是这种情况，需要将网站部署到HTTPS服务器后再进行审计。

最后验证 #

在生产环境页面打开Chrome开发者工具，切换到Application > Service Workers，确认能看到ngsw-worker.js处于激活状态，再重新运行Lighthouse，应该就能正常检测到Service Worker了。

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