在Firefox上未检测到Angular5 Service Worker更新（SWUpdate）。在铬上工作

问题描述

我正在使用 Angular5 和 angular服务人员。

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

现在，如果我更新一些代码并再次部署，则 服务人员不会得到更新。

因此，我经历了

如果您对我的服务工作者服务的外观感兴趣，您可以在中看到代码。

您还可以通过访问 yourdomain.com/ngsw/state

I am using Angular5 and angular service worker.

I cached some data and some assets and everything is working fine as expected and even deployed the code.

Now, if I update some code and deploy again, the service worker doesnot get updated.

So, I had gone through Angular service worker link and I Implemened SwUpdate service.

Here is my code:

I created a service and called it in 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());
      });
    });
  }
}

What the above code does:

• Whenever a new code is deployed, the old serviceworker detects it.
• Then it subscribes to updates.available event.
• We listen to that event and er reload the page.

Issue:

解决方案

I had this same issue and was able to fix it by registering the service worker in main.ts:

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

I also created a Service worker service to notify the user when there is a new update available:

If you are interested in how my service worker service looks, you can see the code here.

You can also check if any errors have been logged by visiting yourdomain.com/ngsw/state

这篇关于在Firefox上未检测到Angular5 Service Worker更新（SWUpdate）。在铬上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！