如何从 Angular 4 内部监听 Service Worker (sw-precache) 更新答案

【问题标题】：How to Listen for Service Worker (sw-precache) Updates from Inside Angular 4如何从 Angular 4 内部监听 Service Worker (sw-precache) 更新
【发布时间】：2017-08-22 17:36:00
【问题描述】：

在SW-Precache demo code 中，当“旧内容将被清除并且新内容将被添加到缓存中”时，有一行记录到控制台。它还在 cmets 中表示，这是让用户知道有新内容可用的好时机。

但是，该脚本位于 service worker 注册块中，我已将其放在我的 index.html 文件（或我的 main.ts 文件；我已尝试两种方式）中。但是，我希望从一个角度组件中收到有关此更新的通知，这样我就可以向用户显示一个很好的通知。

这样做的正确方法是什么？我在 main.ts 中创建了一个 observable 并将其导入到我的组件中，但这会导致循环引用错误。

【问题讨论】：

标签： angular service-worker sw-precache

【解决方案1】：

您可以使用官方的 @angular/service-worker 包而不是自己实现它，它也与 Angular CLI 很好地集成。它提供了一个Observable，当有新版本可用时会发出值。然后您可以通知用户，例如显示一个小吃店。

摘自docs：

constructor(updates: SwUpdate) {
  updates.available.subscribe(event => {
    console.log('current version is', event.current);
    console.log('available version is', event.available);
  });
}

【讨论】：