Workbox

Workbox极大地简化了PWA的构建过程，可以把Workbox理解为Google官方的PWA框架，它解决的就是用底层API写PWA太过复杂的问题，接管了监听SW的install、active、fetch事件做相应逻辑处理等。

Workbox的功能非常完善，插件机制也能够很好的满足各种业务场景需求，如果自己手动维护一个应用的原生的Service Worker文件工作量非常巨大，而且有很多潜在的问题不容易被发现，Workbox很好的规避了很多Service Worker潜在的问题，也大大减小了Service Worker的维护成本，所以建议大家在开始考虑使用Service Worker的时候优先考虑Workbox。

引入

// 首先引入 Workbox 框架
importScripts("https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js");

workbox.setConfig({
  modulePathPrefix: "https://g.alicdn.com/kg/workbox/3.3.0/",
});

workbox.precaching([
  // 注册成功后要立即缓存的资源列表
]);

// html的缓存策略
workbox.routing.registerRoute(
  new RegExp(".*.html"),
  workbox.strategies.networkFirst()
);

workbox.routing.registerRoute(
  new RegExp(".*.(?:js|css)"),
  workbox.strategies.cacheFirst()
);

workbox.routing.registerRoute(
  new RegExp("https://your.cdn.com/"),
  workbox.strategies.staleWhileRevalidate()
);

workbox.routing.registerRoute(
  new RegExp("https://your.img.cdn.com/"),
  workbox.strategies.cacheFirst({
    cacheName: "example:img",
  })
);

通过workbox.precaching中的是install以后要塞进caches中的内容，workbox.routing.registerRoute中第一个参数是一个正则，匹配经过fetch事件的所有请求，如果匹配上了，就走相应的缓存策略workbox.strategies对象为我们提供了几种最常用的策略，如下：

HTML，如果你想让页面离线可以访问，使用NetworkFirst，如果不需要离线访问，使用NetworkOnly，其他策略均不建议对HTML使用。
CSS和JS，情况比较复杂，因为一般站点的CSS，JS都在CDN上，SW并没有办法判断从CDN上请求下来的资源是否正确（HTTP 200），如果缓存了失败的结果，问题就大了。这种我建议使用Stale-While-Revalidate策略，既保证了页面速度，即便失败，用户刷新一下就更新了。如果你的CSS，JS与站点在同一个域下，并且文件名中带了Hash版本号，那可以直接使用Cache First策略。
图片建议使用Cache First，并设置一定的失效事件，请求一次就不会再变动了。

CLI

Workbox为我们提供了CLI工具以便于生成配置文件：

$ yarn global add workbox-cli

# 生成配置文件
$ workbox wizard

module.exports = {
  globDirectory: "./",
  globPatterns: ["**/*.{html,json,js}"],
  swDest: "./src/sw.js",
};

基于配置文件可以快速生成SW文件：

$ workbox generateSW path/to/config.js

预缓存

PWA中预缓存的文件只要按照如下所示的接口给出文件路径即可，在第一次访问网站时便会预缓存相应文件：

// 预缓存，同ws中的cacheName
workbox.core.setCacheNameDetails({
  prefix: "sharee",
  suffix: "v1",
  precache: "precache",
  runtime: "runtime",
});

// 动态缓存
workbox.routing.precacheAndRoute([
  {
    url: "/index.html",
    revision: "asdf",
  },
  "/index.abc.js",
  "/index.bcd.css",
]);

路由匹配&请求响应

Workbox对资源请求匹配和对应的缓存策略执行进行了统一管理，采用路由注册的组织形式，以此来规范化动态缓存，使用下面这个函数：

workbox.routing.registerRoute(match, handlerCb);

match：路由匹配规则

上述函数中的match指路由匹配规则，有三种匹配方式。

对URL进行字符串匹配，绝对路径/相对路径

workbox.routing.registerRoute("http://127.0.0.1:8080/index.css", handlerCb);
workbox.routing.registerRoute("/index.css", handlerCb); // 以当前url为基准
workbox.routing.registerRoute("./index.css", handlerCb);

正则匹配

workbox.routing.registerRoute(`/\/index\.css$/`, handlerCb);

自定义匹配方法

该自定义方法是一个同步执行函数，在表示资源请求匹配成功时返回一个真值。

const match = ({ url, event }) => {
  return url.pathname === "/index.html";
};

handlerCb：资源请求处理方法

对匹配到的资源请求进行处理的方法，开发者可以在这里决定如何响应请求，无论是从网络、从本地缓存还是在Service Worker中直接生成都是可以的。该方法是异步方法并返回一个Promise，要求Promise解析的结果必须是一个Response对象。

// url：event.request.url 经 URL 类实例化的对象；
// event：fetch 事件回调参数；
// params：自定义路由匹配方法所返回的值。
const handlerCb = ({ url, event, params }) => {
  return Promise.resolve(new Response("Hello World!"));
};

缓存策略

拦截请求后我们可能会缓存响应，通常我们需要自己来编写相应的策略，Workbox提供了常用的几种策略可以直接使用。workbox.strategies对象提供了一系列常用的动态缓存策略来实现对资源请求的处理，有以下五种：

NetworkFirst：网络优先
CacheFirst：缓存优先
NetworkOnly：仅使用正常的网络请求
CacheOnly：仅使用缓存中的资源
StaleWhileRevalidate：从缓存中读取资源的同时发送网络请求更新本地缓存

以CacheFirst为例，使用方法如下：

workbox.routing.registerRoute(
  /\.(jpe?g|png)/,
  new workbox.strategies.CacheFirst({
    cacheName: "image-runtime-cache",
    plugins: [
      // 通过插件来强化缓存策略
      new workbox.expiration.Plugin({
        maxAgeSeconds: 7 * 24 * 60 * 60, // 对图片资源缓存1星期
        maxEntries: 10, // 匹配该策略的图片最多缓存10张
      }),
    ],
    fetchOptions: {
      // 跨域请求的资源
      mode: "cors",
    },
  })
);

最近更新于0001-01-01