首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

与 Service Worker 通讯

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

前提条件

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

SwUpdate 服务

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

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

  • 获取出现可用更新的通知。如果要刷新页面,这些就是可加载的新版本。
  • 获取更新被激活的通知。这时候 Service Worker 就可以立即使用这些新版本提供服务了。
  • 要求 Service Worker 向服务器查询是否有新版本。
  • 要求 Service Worker 为当前页面激活该应用的最新版本。

有可用更新及已激活更新

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

log-update.service.ts

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
content_copy@Injectable()
export class PromptUpdateService {

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

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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com