Angular Service Worker安装阶段报错，注册失败求助

版本信息 #

Angular CLI: 15.2.0
Node: 16.18.1
Package Manager: npm 8.19.2
OS: linux x64

Angular: 15.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            6.6.7
typescript                      4.8.4

调用swPush的代码 #

subscribeToNotifications() {
  console.log('subscribeToNotifications: ');
  this.swPush.requestSubscription({
    serverPublicKey: VAPID.publicKey
  })
    .then(sub => {
      console.log('User accepts: ', sub);
      this.alertService.success('Your browser will show up our notifications', AlertOptions.options)
    })
    .catch(err => console.error("Could not subscribe to notifications", err));
}

报错信息 #

Service worker registration failed with: TypeError: ServiceWorker script at http://localhost://ngsw-worker.js for scope http://localhost:// encountered an error during installation.

已完成的配置 #

• 按官方指南完成了所有配置步骤
• ngsw.json和ngsw-worker.js已生成在angular.json的outputPath指定路径（记为out-path）
• angular.json和package.json配置已更新完毕
• app.module.ts中ServiceWorkerModule的配置如下：

...
OverlayModule,
ServiceWorkerModule.register('/<out-path>/ngsw-worker.js', {
  enabled: true, // 实际应为environment.production
  // 应用稳定后或30秒后注册ServiceWorker（以先触发的为准）
  registrationStrategy: 'registerWhenStable:30000'
})
...

• 用ng serve --proxy-config proxy.conf.js启动应用，希望在Dev模式下解决问题，也接受生产环境的解决方案

更新记录 #

已将Angular从v13升级至v15.0.2（当前版本为v15.2.0）

排查思路与解决方案 #

1. Dev模式的局限性
   Angular默认在ng serve的Dev模式下不支持Service Worker——因为Dev模式是内存编译，不会把产物写入磁盘，Service Worker无法读取本地的ngsw-worker.js和ngsw.json文件。就算手动开了enabled: true，也会因为文件无法访问导致安装失败。
   解决：改用生产构建后启动本地服务，执行ng build --prod，再用npx http-server ./dist/<out-path>启动服务后测试。

2. 核对注册路径
   你配置的注册路径是/<out-path>/ngsw-worker.js，要确保和实际构建后的文件位置匹配。比如如果outputPath是dist/my-app，那么注册路径应该写/ngsw-worker.js（因为http-server会把dist/my-app作为根目录），写/my-app/ngsw-worker.js会导致404，直接失败。

3. 检查VAPID公钥有效性
   确认VAPID公钥是正确生成的base64编码字符串，没有多余空格或换行。可以重新生成一对VAPID密钥替换后再测试。

4. 查看浏览器详细错误日志
   打开浏览器开发者工具的「Application」标签，进入「Service Workers」面板，查看更具体的安装失败原因——比如是脚本加载错误、权限问题还是缓存策略冲突，这些细节能直接定位问题。

5. 升级后的兼容性检查
   从v13升到v15后，确保所有依赖版本匹配（你的版本目前是匹配的，但可以再确认package-lock.json里没有依赖冲突）。另外v15对Service Worker的注册策略和缓存规则有调整，建议把enabled改回environment.production，避免在Dev模式下强制启用引发的问题。

内容的提问来源于stack exchange，提问作者A.Casanova