如果您已经使用@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。