Workbox 使用记录

修改在 Cache Storage 中的缓存名。

程序保存在 Cache Storage 的默认缓存有两个，一个是预缓存一个是运行时缓存。

缓存名的格式是 <prefix>-<Cache ID>-<suffix>，通过修改缓存前缀和后缀，可以让缓存名独一无二，避免在使用 localhost 调试程序时因为端口号相同引发的冲突。
修改前后缀：

workbox.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1'
});

也可以传入prechache和runtime来完全定制缓存名：

workbox.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'custom-precache-name',
  runtime: 'custom-runtime-name'
});

Workbox 的策略（Strategies）

Workbox 有以下几种策略：

• Stale-While-Revalidate
• Cache First
• Network First
• Network Only
• Cache Only

Workbox 的 Strategies 是一种模式，用于决定 service worker 在触发 fetch 事件时该如何响应。

下面介绍的是 Workbox 的几种 Strategies 和如何在 workbox-routing 中使用 Strategies。

Stale-While-Revalidate

stale-while-revalidate.png

Stale-While-Revalidate 倾向于当存在缓存文件时，尽可能快地利用缓存返回响应。当无缓存存在时这种策略就会失效，网络请求只用于更新缓存。
这种 Strategies 适用于对实时数据要求不高的应用。

Cache First（缓存不行了就走网络）

cache-first.png

对非关键性，可以逐步获取的资源，可以采用“缓存优先”策略。
当要请求的资源在缓存中存在时，会优先使用缓存中的文件而不发起网络请求。而如果请求的资源缓存中不存在时 Serevice Worker 会发起网络请求，并缓存该请求返回的结果，作为下一次发起相同请求时的回应。

Network First（网络不行了就走缓存）

network-first.png

如果你的应用需要频繁的网络请求，Network first 将是一个理想的方案。如果网络可用，那么应用中的每个请求将通过网络请求，并保存为缓存，一旦网络不可用，就会使用缓存中的内容。

Network Only

network-only.png

不对请求进行缓存，只使用网络请求的资源。这种 Strategies 的应用场景一般是想要对网络请求进行特殊的控制。

Cache Only

cache-only.png

不走网络请求，资源仅从缓存中获取。这是一种在 Workbox 中不太常见的 Strategies。除非应用已经做了很好的预缓存。

Strategies 的配置

你可以对 Strategies 做以下操作：

• 给使用了某个 Strategies 的缓存命名；

workbox.routing.registerRoute(
  new RegExp('/images/'),
  workbox.strategies.cacheFirst({
    cacheName: 'image-cache',
  })
);

• 对使用了某个 Strategies 的缓存设置过期时间；
• 可以设置一组插件，当响应或缓存一个请求的时候，触发他们的生命周期。
  Workbox 准备了一系列的插件，可以配合 Strategies 使用：
  • workbox.expiration.Plugin
  • workbox.cacheableResponse.Plugin
  • workbox.broadcastUpdate.Plugin
  • workbox.backgroundSync.Plugin
    使用方法：

workbox.routing.registerRoute(
  new RegExp('/images/'),
  workbox.strategies.cacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ]
  })
);

Strategies 的高级使用方法

上面介绍的方法都是在 workbox 的 workbox-routing中使用 Strategies，如果想要在自己的 fetch 事件中使用，你可以使用 Strategies 类，通过一个特殊的策略类去发起并处理一个请求。

self.addEventListener('fetch', (event) => {
  if (event.request.url === '/') {
    const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
    event.respondWith(staleWhileRevalidate.handle({event}));
  }
});

参考资料：
### Workbox | Google Developers