Angular 9在http://127.0.0.1:8080上充当PWA,但在http://192.168.1.197:8080和Heroku上不起作用

问题描述

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

我遵循了官方指南,使用http服务器(https://angular.io/guide/service-worker-getting-started)在本地运行它。问题在于它运行良好,在http://127.0.0.1:8080上缓存了请求,但是没有在http://192.168.1.197:8080或部署它的(https://sportbuddies-ui.herokuapp.com)的Heroku上注册服务工作者。

No service worker on http://192.168.1.197:8080

http://192.168.1.197:8080上没有服务人员

Everything works on http://127.0.0.1:8080

一切正常,http://127.0.0.1:8080

Doesn't work on Heroku

在使用HTTPS的Heroku上不起作用

webmanifest

网络清单

ngsw-config

ngsw-config

app.module.ts

app.module.ts

试图在app.module.ts文件中寻找解决方案,清理缓存,重建项目,更改注册策略。但是到目前为止,我什至不知道要去谷歌搜索什么,我可以从哪一侧开始调试它。任何想法都表示赞赏。

解决方法

  1. 它可以在http://127.0.0.1:8080上工作,但不能在http://192.168.1.197:8080上工作,因为第一个是localhost,而另一个则没有(我经验不足,无法更好地解释它),并且是一名服务人员确实需要https或localhost进行注册。
  2. Heroku的问题在于构建是通过ng build完成的,而要生成服务工作者,则应该使用ng build --prod进行构建。