Angular 7 - 服务工作者未注册

Question

我按照" https://angular.io/guide/service-worker-getting-started "中的说法完成了我的应用程序PWA.

正是使用了这个命令:

ng add @angular/pwa

npm install http-server -g

ng build --prod

http-server -p 8080 -c-1 dist

然后我在Chrome上打开了这个网址(隐身)

http://127.0.0.1:8080

当我为开发人员打开工具(f12)>应用程序>服务工作者时,没有可用的服务工作者,当我在那里设置离线时,网站不起作用.

有关我的角应用的其他信息:

package.json :(最重要的)

"@angular/core": "^7.0.2",
"@angular/pwa": "^0.10.6",
"@angular/service-worker": "^7.0.4",
"@angular-devkit/build-angular": "^0.10.6",
"@angular/cli": "^7.0.6",

Answer 1

似乎@ angular / cli @ 7.1.4的服务工作者设置已损坏：

作为临时解决方案，您可以通过修改文件src / main.ts手动进行手动注册（一旦修复，您可以删除手动服务人员注册。）：

.....

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('/ngsw-worker.js');
  }
}).catch(err => console.log(err));

PS：Github问题创建：https : //github.com/angular/angular-cli/issues/13351

PS：Github问题2已创建：https : //github.com/angular/angular-cli/issues/15025

Answer 2

artemisian的解决方案有效，但它是一个hack，您不确定它将来是否会起作用。

更好的解决方案

有一个“ registrationStrategy”设置，该设置与角度等待注册直到您的应用“稳定”有关。现在，如果您在启动应用程序（身份验证和建立Websocket连接）时加载了很多东西，显然，角度看来您的应用程序将永远不稳定。

幸运的是，您可以覆盖registrationStrategy registerImmediately这样：

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

请参阅此处的文档

之后，无论您的应用程序处于什么状态，服务工作人员都将加载。还有一个传递可观察对象的选项，因此您可以在认为正确的任何时候加载它。

Answer 3

请注意，浏览器不会为 HTTP 注册服务工作者，除非它是 localhost。

运行http-server，控制台显示将从以下 URL 提供应用程序： http://10.40.59.29:8080、http://127.0.0.1:8080、http://192.168.255.209:8080。

不要忘记将 IP 地址替换为localhost，如http://localhost:8080/