通过前两部分的学习,相信大家已能够熟练运用 PWA 的相关技术来构建高可用的现代 Web 应用。但如果我们仔细分析实战篇示例中 sw.js 的实现,便会发现:
- 在
install和activate事件中,一般只对静态资源做预缓存处理,且实现逻辑在不同的应用中几乎没有差异。 - 在
fetch事件中,需要对不用类型请求执行不同的请求策略、缓存置换控制,如果要处理的请求类型过多,那么 fetch 事件的实现将变得极其臃肿且不易维护。
我们经常将预缓存处理、请求策略、缓存置换等逻辑进行进一步抽象,以解决此类问题。也正是这些原因,本部分我们将进一步学习由 Google 官方推出的 PWA 应用框架 Workbox,该框架以配置的形式将我们从繁琐且容易出错的底层 API 中解放出来,以便我们能够更容易且高效地完成 PWA 应用的构建。
在接下来的章节中,我们将详细介绍 Workbox 的使用,主要内容包括:
- 基本配置:介绍缓存名称、调试开关、
skipWaiting开关等基本信息的配置。 - 预缓存:介绍预缓存在
Workbox中的使用。 - 路由配置:介绍在
Workbox中如何进行路由配置来动态地拦截并处理网络请求。 - 请求 & 缓存置换策略:介绍请求策略、缓存置换机制在 Workbox 中的使用。
- 导航预加载:介绍导航预加载在
Workbox中的使用。 - 可缓存对象:介绍
Workbox确定请求响应是否进行缓存的策略及使用。 - 缓存更新广播:介绍缓存更新后,
Service Worker通知页面进行一些处理的机制,及Service Worker与页面互相通讯的常用技术及适用场景。 - 后台同步:介绍后台同步在 Workbox 中的实现及使用。
- 插件:介绍 Workbox 的插件机制及如何自定义插件。
Workbox window:介绍 Workbox 在页面线程中的使用。Workbox build:介绍如何使用workbox-build来生成Service Worker脚本,或生成预缓存列表并将其附加到已有的Service Worker脚本中。
本部分完整代码仓库为:github.com/nanjingboy/…
注:本部分基于 workbox@4.3.1 进行讲解。
