AngularServiceWorker：处理更新

如果您使用 @angular/service-worker 包为您的应用程序设置了服务工作者，您可能想知道如何为最终用户处理应用程序的陈旧版本。 这很容易成为一个问题，因为新版本的 service worker 只会在页面重新加载时被激活。

值得庆幸的是，@angular/service-worker 有一个 SwUpdate 类，可以轻松检查可用更新。

订阅可用更新

让我们通过创建一个订阅 available observable 的 Update 服务来了解 SwUpdate 的基本用法，该服务在有可用的 service worker 更新时发出：

更新服务.ts

import { Injectable } from '@angular/core';

import { SwUpdate } from '@angular/service-worker';

一个简单的页面重新加载将完成激活新服务工作者的技巧，因此更新逻辑可以使用类似小吃栏组件的东西来提示用户重新加载页面。 Angular Material 有一个很棒的 snackbar 组件，可以像下面这样使用：

更新服务.ts

import { Injectable } from '@angular/core';

import { MatSnackBar } from '@angular/material';
import { SwUpdate } from '@angular/service-worker';
@Injectable()
export class UpdateService {
  constructor(private swUpdate: SwUpdate, private snackbar: MatSnackBar) {
    this.swUpdate.available.subscribe(evt => {
      const snack = this.snackbar.open('Update Available', 'Reload');
  snack
    .onAction()
    .subscribe(() => {
      window.location.reload();
    });

  snack.setTimeout(() => {
    snack.dismiss();
  }, 6000);
});

---

然后我们只需要确保我们的 Update 服务在 app 模块中提供并且它被注入到 app 组件中：

app.component.ts

import { Component } from '@angular/core';

import { UpdateService } from './update.service';

这就是基本的更新机制。 现在让我们看一下 SwUpdate 类中可用的更多属性和方法。

已激活 & 已启用

SwUpdate 有一个 activated observable，它类似于 available observable，可以订阅它以连接到成功的 service worker 激活。

此外，如果当前启用了 service worker，还有一个 isEnabled 属性返回 true：

import { Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Injectable()
export class UpdateService {
  constructor(private swUpdate: SwUpdate) {
    if (!this.swUpdate.isEnabled) {
      console.log('Nope 🙁');
    }
  }
}

checkForUpdate() 和 activateUpdate()

SwUpdate 类还有两个方法可以让我们更好地控制服务工作者更新：

• checkForUpdate()：允许定期检查更新。
• activateUpdate()：允许我们强制服务工作者更新。