Angular 7 - 未注册的服务人员

Posted 2023-02-16

【中文标题】Angular 7 - 未注册的服务人员

【英文标题】：Angular 7 - service worker not registered

【发布时间】：2019-04-19 04:10:20

【问题描述】：

我按照“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) > 应用程序 > Service Worker 时，没有可用的 Service Worker 并且当我在那里设置离线时网站无法运行。

关于我的 Angular 应用的其他信息：

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",

【问题讨论】：

你用过firefox吗？您是否尝试缓存动态资产或 url？

因为目前我只是尝试让基本功能正常工作，您可以在此处查看默认应缓存的内容angular.io/guide/…

@tmz 是的，我明白了。您是否尝试过使用 firefox 来查看是否有 service worker？您的网站是静态内容还是只有动态内容？

@ams 我没有尝试使用firefox，但我不认为这个问题与chrome浏览器有关。静态/动态内容。

【参考方案1】：

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

作为临时解决方案，您可以通过修改文件 src/main.ts 自己手动注册（一旦修复，您可以删除手动 service worker 注册。）：

.....

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

【讨论】：

非常感谢您的解决方法！！！我花了很多时间调试这个。顺便说一句，我什至在版本 7 之前就遇到过这个问题。

在 CLI 中损坏：7.3.1 也

哪个@angular/cli 版本稳定，我们可以使用service worker

我认为这与 serviceworker 坏了无关。我相信您的应用程序不稳定。例如 setinterval 或 settiemout 会破坏角度稳定性。你应该使用其他的东西。

新问题已创建，希望这次不要关闭：github.com/angular/angular-cli/issues/15025

【参考方案2】：

artemisian 的解决方案有效，但它是一个 hack，你不确定它是否会在未来有效。

更好的解决方案

有一个“registrationStrategy”设置与注册时的角度等待有关，直到您的应用程序“稳定”。现在，如果您在启动应用程序（身份验证和构建 websocket 连接）时加载了一堆东西，那么 angular 显然认为您的应用程序永远不会稳定。

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

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

查看文档here

在此之后，无论您的应用处于何种状态，serviceworker 都会加载。还有一个传递 observable 的选项，因此您可以在认为正确的时候加载它。

【讨论】：

这是一个方便的技巧，但仅在 Angular V8 中可用。

太棒了。我不明白为什么服务人员不注册。我有一些需要使用无限间隔/函数的东西......

更新：当我用 rxjs 的 timer(...) 替换所有 setInterval(...) 时，我实际上不再需要该选项了！ learnrxjs.io/operators/creation/timer.html

非常感谢您的回答！！！我正在使用 oidc 客户端，但无法弄清楚为什么它不会注册。我想给你的 GitHub 答案竖起大拇指github.com/angular/angular-cli/issues/13351，但他们锁定了这个问题！ :-(

【参考方案3】：

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

运行 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/

【讨论】：

在 Google Chrome 中，您可以设置可信来源以在 chrome://flags/#unsafely-treat-insecure-origin-as-secure 中进行测试