如何在 Angular 中为应用更新通知实现 Service Worker

Question

我已经安装了角度服务工作者模块并将适当的代码应用于应用程序模块。 我有一个updateComponent ，它的 UI 可以通知用户有一个可用的新版本，其中有一个更新按钮，它将重新加载页面。

但是，在之前版本的 service worker 中，使通知 UI 出现并在按钮单击（重新加载）时被删除的代码如下：

export class LogUpdateService {

  updateAvailable: boolean = false;

  constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      // console.log('current version is', event.current);
      // console.log('available version is', event.available);
      this.updateAvailable = true;
    });
    updates.activated.subscribe(event => {
      // console.log('old version was', event.previous);
      // console.log('new version is', event.current);
    });
  }
}

在最新版本中， available已折旧。

我添加了以下实现 UI 组件通知出现。 单击通知组件中的update按钮时，将重新加载页面（如预期的那样）。 但是，通知组件仍然存在并且不会消失。 该组件由来自以下服务的带有ngIf布尔值的updateAvailable 。

export class AppUpdateService {

  updateAvailable: boolean = false;

  constructor(
    private swUpdate: SwUpdate
  ) {

    swUpdate.checkForUpdate().then(() => {
      this.updateAvailable = true;
    });

  }
}

问题

一旦点击了通知组件中的update按钮并重新加载了页面，为什么updateAvailable仍然为真？ 最新版本的 Service Worker 中是否还有其他条件可以检查是否已应用更新？

Answer 1

以下似乎有效：

    this.swUpdate.versionUpdates.subscribe((event: VersionEvent) => {
      if (event.type === 'VERSION_READY') {
        // do stuff
      }
    });