Workbox使用策略

1、什么是Workbox Strategies？

当service workers 首次被引入时，可以设定一组常见的缓存策略。 缓存策略是一种模式，用于确定service workers 在收到fetch事件后如何生成响应。

workbox-strategies提供了最常用的缓存策略，因此很容易将它们应用到服务工作者中。

我们不会在Workbox支持的策略之外详细介绍，但你可以在Offline Cookbook中了解更多信息

2、使用策略

在以下示例中，我们将向你展示如何在workbox-routing中使用Workbox缓存策略。 你可以使用本文的“配置策略”部分中介绍的每种策略定义一些选项。

在高级用法部分，我们将介绍如何在没有workbox-routing的情况下直接使用缓存策略。

下面我们将介绍几种基本的策略

2.1 Stale-While-Revalidate

 

 

stale-while-revalidate模式允许你使用缓存的内容尽快响应请求（如果可用），如果未缓存，则回退到网络请求。 然后，网络请求用于更新缓存。

这是一种相当常见的策略，适合更新频率很高但重要性要求不高（至少允许一次缓存读取）的内容。在有缓存的情况下，该模式保证了客户端第一时间拿到数据的同时，也会去请求网络资源更新缓存，保证下次客户端从缓存中读取的数据是最新的。因此该模式不能减轻后台服务器的访问压力，但却能给前端用户提供快速响应的体验。

 workbox.routing.registerRoute( // 当是资源js文件的时候
    new RegExp('(app|manifest|vendor)+.js'),
    workbox.strategies.staleWhileRevalidate({
        cacheName: 'main-js'
    })
)

　　

2.2 Cache First (缓存优先，缓存回落到网络)

 

 

离线Web应用程序将严重依赖缓存，但对于非关键且可逐步缓存的资产，首先缓存是最佳选择。

如果缓存中有响应，则将使用缓存的响应来完成请求，根本不会使用网络。 如果没有缓存的响应，则将通过网络请求来满足请求，并且将缓存响应，以便直接从缓存提供下一个请求。

该模式可以在为前端提供快速响应的同时，减轻后台服务器的访问压力。但是数据的时效性就需要开发者通过设置缓存过期时间或更改sw.js里面的修订标识来完成缓存文件的更新。一般需要结合实际的业务场景来判断数据的时效性。

workbox.routing.registerRoute(
  new RegExp('/styles/'),
  workbox.strategies.cacheFirst()
);

2.3 Network First (网络回落到缓存)

对于经常更新且关键（由业务判断出来）的请求，网络优先策略是理想的解决方案。 默认情况下，它将尝试从网络获取最新请求。 如果请求成功，它会将响应放入缓存中。 如果网络无法返回响应，则将使用缓存响应。

 

 

workbox.routing.registerRoute(
  new RegExp('/index/'),
  workbox.strategies.networkFirst()
);

这意味着只要当第一次请求成功时，service worker就会缓存一份请求结果。当后续重复请求时，缓存也会每次更新。

若网络请求失败时，只要缓存里有内容，就能让前端获取一个响应（从service worker的缓存里）。因此，此种模式提高了前端页面的稳固性，即使在网络请求失败的情况下，页面也能从上次的缓存中读取到数据展示，而不是粗鲁的告诉用户网络请求失败的一个响应。

workbox.routing.registerRoute(
  new RegExp('/index/'),
  workbox.strategies.networkFirst()
);

2.4 Network Only

 

 

如果你需要从网络中完成特定请求，则首先要使用网络策略。

workbox.routing.registerRoute(
  new RegExp('/admin/'),
  workbox.strategies.networkOnly()
);

2.5 Cache Only

 

 

仅缓存策略确保从缓存获取请求。 这在workbox中不太常见，但如果你有自己的预先缓存步骤则可能很有用。

workbox.routing.registerRoute(
  new RegExp('/app/v2/'),
  workbox.strategies.cacheOnly()
);

3、配置策略

所有策略都允许你配置：

• 要在策略中使用的缓存的名称。
• 缓存在策略中使用的过期限制。
• 一组插件，在获取和缓存请求时将调用其生命周期方法。

3.1 更改策略使用的缓存

你可以通过提供缓存名称来更改缓存所使用的策略。 如果要分离资源以帮助调试，这非常有用。

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

3.2 使用插件

Workbox附带了一组可以与这些策略一起使用的插件。

• 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,
      }),
    ]
  })
);

4、高级用法

如果要在自己的fetch事件逻辑中使用策略，可以使用策略类通过特定策略运行请求。

例如，要实现stale-while-revalidate类，您可以执行以下操作：

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