Angular 9提示No matching service worker detected错误排查求助

遗漏的配置项 #

• Service Worker注册路径错误
  app.module中ServiceWorkerModule.register的路径填写错误，生产构建后ngsw-worker.js会输出在打包产物的根目录，与index.html同级，需将路径从../ngsw-worker.js改为'ngsw-worker.js'。
• manifest配置不规范
  1. 图标配置中大量svg文件的MIME类型误写为image/png，svg对应的正确类型为image/svg+xml
  2. 缺少PWA强制要求的192x192、512x512两个尺寸的PNG格式图标，会触发manifest校验失败，连带Service Worker检测异常
• 子路径部署适配遗漏（如果适用）
  如果你的应用部署在域名子路径下，需同步修改manifest.webmanifest中的scope、start_url，以及ngsw-config.json中的index路径，添加对应的子路径前缀。

最佳测试方法 #

1. 不要直接用ng serve开发环境测试，Angular Service Worker默认仅在生产模式生效，需先执行生产构建：

ng build --prod

2. 本地使用静态服务器测试：

# 全局安装http-server
npm install -g http-server
# 进入构建后的dist产物目录
cd dist/你的项目名
# 启动静态服务
http-server -p 8080 -o

注意必须使用http/https协议访问，file本地文件协议不支持Service Worker。
3. 避免缓存干扰：每次修改配置重新构建后，打开浏览器开发者工具「Application」标签，先清空所有站点存储、注销已有Service Worker，关闭浏览器后重新打开访问测试。
4. 问题排查方法：控制台执行以下命令查看Service Worker注册状态：

navigator.serviceWorker.getRegistrations().then(regs => console.log(regs))

如果返回空数组，可检查网络面板中ngsw-worker.js的请求是否为404，确认路径是否正确。

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