[翻译]Service Worker的交互

原文

把ServiceWorkerModule导入到你的AppModule是不仅注册了 service worker，也提供了一些你可以使用的服务，可以作用到service worker中并控制你app的缓存。

前期准备

如下的基础知识:

• [翻译]入门angular的 Service Workers.

SwUpdate 服务

SwUpdate服务能让你访问到一些事件，如service worker发现了可用的新的更新 或 service worker更新到了最新版。
The [SwUpdate](https://angular.io/api/service-worker/SwUpdate) service supports four separate operations:
SwUpdate服务支持4个独立的方法：

• 获得可用更新的信息的观察对象。这是那些新版本文件的信息，页面刷新时就会启动到。
• 获得更新成功的观察对象。service worker启用新版本时会发布。
• 要求service worker去检查更新。
• 要求service worker在当前页面启动最新版本的app。

可用和启用中的更新

这两个更新事件，available and activated，是SwUpdate的观察者对象

@Injectable()
export class LogUpdateService {

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

你可以使用这个事件去通知用户有一个待用更新或去刷新页面去使用新更新。

检查更新

可以要求service worker去检查服务器是否部署了任何更新。如果你的网站经常改变或者有一个更新计划，你就可以这样去执行检查。

通过使用checkForUpdate()方法：

import { interval } from 'rxjs/observable/interval';

@Injectable()
export class CheckForUpdateService {

  constructor(updates: SwUpdate) {
    interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
  }
}

这方法返回一个Promise对象，表示更新检查成功，但是它不能说明是否有新更新。因为即使有一个更新被发现了，service worker也必须成功下载被修复过的文件，这是有可能失败的。如果下载也成功了，可用更新的available观察者就能订阅到新版本的信息。

强制更新

如果当前页面需要马上更新到最新版本，可以使用activateUpdate()方法：

@Injectable()
export class PromptUpdateService {

  constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      if (promptUser(event)) {
        updates.activateUpdate().then(() => document.location.reload());
      }
    });
  }
}

这么做就能破坏当前app的懒加载，特别是那些每次修改都会更改名字的懒加载文件。

更多的关于 Angular service workers

你可能对以下感兴趣

• 生产环境中的Service Worker.

你们的赞赏是我的无限动力