9

我正在使用Angular5和angular service worker。

我cached有一些数据和一些资产，一切都按预期工作，甚至部署了代码。

现在，如果我更新一些代码并再次部署，则service worker不会更新。

所以，我已经通过了Angular 服务工作者链接并且我实现了SwUpdate service。

这是我的代码：

我创建了一个服务并在 App Component 中调用它

import { Injectable, NgZone } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { SwUpdate } from '@angular/service-worker';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class ServiceWorkerService {

  constructor(updates: SwUpdate, ngZone: NgZone) {
    console.log('Servicee worker update called');
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
      updates.activateUpdate().then(() => document.location.reload());
    });
    updates.activated.subscribe(event => {
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });
    ngZone.runOutsideAngular(() => {
      interval(6000).subscribe(() => {
        console.log('Inside Interval')
        ngZone.run(() => updates.checkForUpdate());
      });
    });
  }
}

上面的代码做了什么：

  • 每当部署新代码时，旧的 serviceworker 都会检测到它。
  • 然后它subscribes的updates.available事件。
  • 我们监听该事件并重新加载页面。

问题：

现在，问题是，它在 chrome 上完美运行。但不是在 Firefox 中。在Firefox中，代码没有进入 updates.available.subscribe

4

1 回答 1

12

我遇到了同样的问题，并且能够通过在以下位置注册服务人员来解决它main.ts：

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

我还创建了一个 Service Worker 服务，用于在有新更新可用时通知用户：

在此处输入图像描述

如果您对我的 service worker 服务的外观感兴趣，可以在此处查看代码。

您还可以通过访问来检查是否记录了任何错误yourdomain.com/ngsw/state

于 2018-06-27T09:36:53.690 回答