Angular本地运行Service Worker无响应问题求助：PWA开发疑问

我之前也遇到过类似的本地测试Angular PWA的问题，结合你的情况，大概率是本地服务的配置或者浏览器环境的小问题，下面给你几个排查和解决的方向：

• 先确认Service Worker是否完成注册
  打开Chrome DevTools的Application面板，切换到Service Workers标签页，看看是否有对应域名下的Service Worker条目。如果完全没有，说明注册环节就失败了，赶紧去Console面板找错误提示——比如可能是service-worker.js文件404，或者返回的MIME类型不对。

• 检查http-server的文件服务配置

  • 先手动访问http://localhost:8080/service-worker.js，确认能正常返回文件内容。如果显示404，先检查dist目录下是否真的生成了这个文件（Angular开启PWA的生产构建肯定会生成，不过可以确认下）。
  • 查看这个请求的响应头，确保Content-Type是application/javascript。如果http-server返回的是其他类型，浏览器会拒绝注册这个Service Worker。你可以尝试更新http-server到最新版本，或者启动时强制指定MIME类型：

    http-server -p 8080 -c-1 -m application/javascript:js dist
    

• 核对Angular的base href配置
  如果你构建时指定了自定义的base href（比如ng build --prod --aot --base-href /my-app/），那本地启动服务时要保证路径匹配。比如base href是/my-app/，你需要把dist的内容放到http-server的my-app子目录下，或者启动时用代理参数：

  http-server -p 8080 -c-1 -P http://localhost:8080/my-app/ dist
  

  不过你说远程部署正常，这点可能不是问题，但可以快速确认下。

• 换用Angular CLI官方服务测试
  http-server有时候会在MIME类型、路径处理上出小问题，你可以试试用Angular CLI自带的服务启动生产环境：

  ng serve --prod --aot --port 8080
  

  这个命令会自动处理Service Worker的注册逻辑，能快速排除http-server的问题。

• 重置浏览器的Service Worker状态
  旧的Service Worker缓存或者残留状态可能干扰测试，你可以在DevTools的Application面板里点击Unregister注销旧的Service Worker，然后清空浏览器缓存（快捷键Ctrl+Shift+Del），再刷新页面重新测试你的代码。

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