Angular 11应用配置PWA时Service Worker无法注册问题求助

问题排查及解决方案 #

• 依赖版本不兼容。你使用的Angular版本为11，但package.json中@angular/service-worker的版本为~9.1.6，跨大版本的依赖会导致功能异常，需将该包版本升级至与Angular核心版本一致的v11版本，执行命令：npm install @angular/service-worker@11。
• 运行环境不符合要求。你在app.module中配置了enabled: environment.production，仅生产构建时才会注册Service Worker，本地ng serve启动的开发环境默认不生效。需先执行ng build --prod打包生产版本，再将dist目录部署到HTTP服务（如Nginx、Spring Boot静态资源目录）中测试，不可直接打开本地HTML文件运行。
• ngsw配置文件名不匹配。你贴出的配置文件名为ngsw.config.json，但angular.json中配置的ngswConfigPath为ngsw-config.json，文件名不一致会导致构建时无法生成正确的Service Worker配置，需统一文件名，可修改配置文件名为ngsw-config.json，或调整angular.json中的路径配置。
• 未在index.html中引入manifest文件。需在index.html的head标签内添加如下代码，确保浏览器能正确识别manifest配置：

<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">

• Spring Boot未配置正确的MIME类型。Spring Boot默认没有配置webmanifest文件的对应MIME类型，需在后端配置中添加MIME映射，为webmanifest文件返回application/manifest+json响应头，否则浏览器无法正确识别manifest文件。
• 部署路径不匹配。你当前manifest中scope和start_url均配置为根路径/，如果应用未部署在域名根路径，而是部署在子路径，需将这两个参数修改为对应子路径，同时调整ngsw.config.json中的资源路径前缀、app.module中ServiceWorker注册的路径前缀。

排查时可打开浏览器控制台Application面板，先查看Service Worker选项卡下是否有ngsw-worker.js成功注册，再查看Manifest选项卡是否能正常读取配置，对应报错可直接定位问题。

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