Angular 7：Service Worker 无法注册问题求助

我之前也碰到过一模一样的问题，折腾了好一阵子才搞定，给你列几个最可能的排查方向：

1. 确认Service Worker模块已正确导入 #

首先得确保你在app.module.ts里完成了Service Worker模块的导入和注册，并且仅在生产环境下启用：

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // ...其他模块
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // 可选：延迟注册，比如等应用稳定后再注册
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule { }

这里要注意environment.production必须设为true，不然即使构建了生产包，Service Worker也不会触发注册逻辑。

2. 检查angular.json的构建配置 #

确认你的项目配置里已经明确启用了Service Worker：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "serviceWorker": true,
            "ngswConfigPath": "src/ngsw-config.json"
          }
        }
      }
    }
  }
}

如果serviceWorker字段设为false，哪怕手动执行ng build --prod，构建过程也不会生成有效的注册脚本。

3. 验证运行环境的HTTPS要求 #

Service Worker只能在HTTPS环境下工作（localhost除外，开发环境可以用localhost测试）。如果你的生产环境是HTTP协议，浏览器会直接拒绝注册请求。另外，可以在Chrome DevTools的Application -> Service Workers面板里查看是否有环境相关的报错。

4. 检查构建后的index.html #

构建完成后，打开dist目录里的index.html，看看是否自动注入了Service Worker注册脚本：

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/ngsw-worker.js');
    });
  }
</script>

如果没有这段代码，说明构建过程中没有完成注入，可能是你手动修改过index.html导致注入逻辑失效，或者配置存在问题。

5. 通过DevTools查看具体报错 #

打开Chrome DevTools的Application -> Service Workers面板，查看是否有红色的报错提示。常见错误包括：

• ngsw-worker.js路径错误：如果应用部署在子路径下，需要在注册时指定正确的相对路径，比如ServiceWorkerModule.register('./ngsw-worker.js', ...)
• ngsw.json解析失败：可能是ngsw-config.json的缓存规则配置有误，导致生成的ngsw.json无效，Service Worker无法启动

6. 确认ngsw-config.json的有效性 #

检查src/ngsw-config.json是否符合Angular的配置规范，比如缓存组的路径、文件名有没有拼写错误。可以在构建完成后，查看dist目录里的ngsw.json是否生成完整、无语法错误。

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