Angular 7 - Service Worker未注册

Question

Angular 7 - Service Worker未注册

angularangular-cliservice-workerprogressive-web-appsangular7

28

我按照 "https://angular.io/guide/service-worker-getting-started" 中所写的步骤进行了一切操作，以使我的应用程序成为渐进式Web应用（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）>应用程序>服务工作者时，没有可用的服务工作者，并且当我将其设置为离线时，网站无法运行。

关于我的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",

- tzm

你尝试过使用Firefox吗？你是在尝试缓存动态资源或URL吗？ - ams

因为目前我只是尝试让基本功能正常工作，您可以在此处查看默认情况下应该缓存什么 https://angular.io/guide/service-worker-getting-started#whats-being-cached - tzm

@tmz 是的，我明白。你尝试使用火狐浏览器了吗，看看是否有服务工作者？你的网站是静态内容还是只有动态内容？ - ams

@ams 我还没有尝试使用火狐浏览器，但我不认为这个问题与Chrome浏览器有关。无论是静态还是动态内容。 - tzm

4个回答

39

artemisian的解决方案虽然可行，但是它只是一个hack，并且你不确定它将来是否会继续有效。

更好的解决方案

有一个名为“registrationStrategy”的设置与angular等待注册直到您的应用程序“稳定”有关。如果在启动应用程序时有大量加载内容（身份验证和构建websocket连接），则angular显然认为您的应用程序永远不稳定。

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

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

请参阅此处的文档。

之后，无论您的应用程序状态如何，serviceworker都会加载。还有一个选项可以传递observable，以便在您认为合适时加载它。

- Elger Mensonides

4

这是一个实用的小技巧，但只在Angular V8中才可用。 - MortimerCat

太棒了。我一直搞不清楚为什么服务工作者无法注册。我有一些需要使用无限间隔/函数的东西，所以... - ravo10

2

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

1

非常感谢您的回答!!! 我正在使用oidc客户端，但无法弄清楚为什么它无法注册。我想给您在GitHub上的答案点赞https://github.com/angular/angular-cli/issues/13351 ，但他们锁定了该问题! :-( - KTCO

12

请注意，浏览器不会为HTTP注册Service Worker，除非是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/

- emanuel.virca

2

在Google Chrome中，您可以在chrome://flags/#unsafely-treat-insecure-origin-as-secure中设置受信任的来源以进行测试。如果您在docker化的nginx服务后面使用Angular，则非常有用。 - Kevin Guanche Darias

0

我的解决方法是编辑这一行代码：将'!isDevMode()'改为'isDevMode()'，这样它就可以在本地主机上注册并运行开发模式了。

    ServiceWorkerModule.register('ngsw-worker.js', {
      // enabled: !isDevMode(),
      enabled: true,
      registrationStrategy: 'registerWhenStable:30000'
      // registrationStrategy: 'registerImmediately'
    }),

- Zaffer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artemisian · Accepted Answer

看起来@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));

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

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