Workbox 详解篇 1 概述|PWA专题

通过前两部分的学习，相信大家已能够熟练运用 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 进行讲解。