Angular 9 在 http://127.0.0.1:8080 上用作 PWA，但在 http://192.168.1.197:8080 和 Heroku 上不起作用答案

【问题标题】：Angular 9 works as PWA on http://127.0.0.1:8080 but doesn't work on http://192.168.1.197:8080 and HerokuAngular 9 在 http://127.0.0.1:8080 上用作 PWA，但在 http://192.168.1.197:8080 和 Heroku 上不起作用
【发布时间】：2020-10-21 09:05:22
【问题描述】：

我正在 Angular 9 上开发一个小型宠物项目，并想尝试将其转换为 PWA。已按照指南进行操作（特别是 https://medium.com/javascript-in-plain-english/convert-your-angular-app-into-a-pwa-in-2019-the-painless-guide-bbf523d2ce72）。

我按照官方指南使用 http-server (https://angular.io/guide/service-worker-getting-started) 在本地运行它。问题是它工作正常，在http://127.0.0.1:8080 上缓存请求，但没有在http://192.168.1.197:8080 或部署它的Heroku (https://sportbuddies-ui.herokuapp.com) 上注册服务工作者。 http://192.168.1.197:8080 上没有服务人员一切正常http://127.0.0.1:8080

不适用于带有 HTTPS 的 Heroku

网络清单 ngsw-配置 app.module.ts

已尝试寻找解决方案，清理缓存，重建项目，更改 app.module.ts 文件中的注册策略。但是到目前为止我什至不知道该谷歌，我可以从哪个方面开始调试它。任何想法都表示赞赏。

【问题讨论】：

serviceworker 需要 https 或 localhost 进行注册
它在 localhost 上注册，但不想在 Heroku 上使用 https 进行注册
我在你的照片中看到 heroku 上有 5 个错误，它们是相对的吗？
不，我已更改 Cloudflare 帐户，但它根本找不到这些图像。与 PWA 无关。

标签： angular progressive-web-apps service-worker

【解决方案1】：

它在http://127.0.0.1:8080 上有效，但在http://192.168.1.197:8080 上无效，因为第一个是本地主机，而另一个不是（我没有太多经验，无法更好地解释），并且服务人员确实需要 https 或localhost 进行注册。
Heroku 的问题是构建是使用 ng build 完成的，而要生成 serviceworker 则应该使用 ng build --prod 完成。

【讨论】：