Angular 服务 Worker:处理更新

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

值得庆幸的是,@角度/服务工作者 有一个SwUpdate类,可以轻松地检查可用的更新。

订阅可用更新

让我们通过创建订阅可用可观察对象的更新服务来回顾SwUpdate的基本用法,该服务在有可用的服务工作者更新时发出:

1[label update.service.ts]
2import { Injectable } from '@angular/core';
3
4import { SwUpdate } from '@angular/service-worker';

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

 1[label update.service.ts]
 2import { Injectable } from '@angular/core';
 3
 4import { MatSnackBar } from '@angular/material';
 5import { SwUpdate } from '@angular/service-worker';
 6@Injectable()
 7export class UpdateService {
 8  constructor(private swUpdate: SwUpdate, private snackbar: MatSnackBar) {
 9    this.swUpdate.available.subscribe(evt => {
10      const snack = this.snackbar.open('Update Available', 'Reload');
11  snack
12    .onAction()
13    .subscribe(() => {
14      window.location.reload();
15    });
16
17  snack.setTimeout(() => {
18    snack.dismiss();
19  }, 6000);
20});

然后,我们只需确保我们的更新服务在应用程序模块中提供,并注入到应用程序组件中:

1[label app.component.ts]
2import { Component } from '@angular/core';
3
4import { UpdateService } from './update.service';

这就是基本的更新机制。现在,让我们来看看SwUpdate 类中提供的其他几个属性和方法。

已开通isEnabled

SwUpdate 有一个已激活的可观察对象,该可观察对象类似于可用可观察对象,可以订阅该可观察对象,以便挂钩到成功的服务工作者激活。

此外,如果服务工作进程当前已启用,则有一个isEnabled属性返回True:

 1import { Injectable } from '@angular/core';
 2import { SwUpdate } from '@angular/service-worker';
 3
 4@Injectable()
 5export class UpdateService {
 6  constructor(private swUpdate: SwUpdate) {
 7    if (!this.swUpdate.isEnabled) {
 8      console.log('Nope 🙁');
 9    }
10  }
11}

检查格式更新()&激活更新()

SwUpdate 类还有两个方法,使我们能够更好地控制服务工作者更新:

  • checkForUpdate():允许定期检查更新。
  • activateUpdate():允许我们强制更新service worker。
Published At
Categories with 技术
Tagged with
comments powered by Disqus