与 Service Worker 通讯

与 Service Worker 通讯

ServiceWorkerModule 导入到你的 AppModule 中不仅会注册 Service Worker,还会提供一些服务,让你能和 Service Worker 通讯,并控制你的应用缓存。

前提条件

对下列知识有基本的了解:

SwUpdate 服务

SwUpdate 服务让你能访问一些事件,这些事件会指出 Service Worker 何时发现了可用的更新或者一个更新何时可以被激活 —— 这意味着它现在可以通过更新后的版本提供服务了。

SwUpdate 服务支持四个独立的操作:

  • 获取出现可用更新的通知。如果要刷新页面,这些就是可加载的新版本。

有可用更新及已激活更新

这两个更新事件 availableactivated,都是 SwUpdateObservable 属性:

log-update.service.ts

content_copy@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() 方法来实现:

check-for-update.service.ts

content_copyimport { interval } from 'rxjs'; @Injectable() export class CheckForUpdateService { constructor(updates: SwUpdate) { interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate() } }

该方法返回一个用来表示检查更新已经成功完成的 Promise,不过它不会指出是否确实发现了一个更新。 即使找到了一个,Service Worker 还必须成功下载更新过的文件,而这可能会失败。如果成功了,就会通过一个 available 事件来表明当前应用有一个可用的新版本。

强制激活更新

如果当前页需要立即更新到最新的应用版本,可以通过 activateUpdate() 方法来要求立即这么做:

prompt-update.service.ts

content_copy@Injectable() export class PromptUpdateService { constructor(updates: SwUpdate) { updates.available.subscribe(event => { if (promptUser(event)) { updates.activateUpdate().then(() => document.location.reload() } } } }

这可能会让惰性加载的模块进入当前正在运行的应用中,特别是如果惰性加载的模块文件名中使用了哈希时,这将会改变每一个版本。