Workbox-cacheable-response

在运行时缓存资源时，对于是否 给定的 response 是 “有效”并且符合保存和重复使用的条件

workbox-cacheable-response 模块提供了一种标准方法，可根据响应的数字状态代码、是否存在具有特定值的标头，或这两者的组合来确定是否应缓存响应。

根据状态代码进行缓存

您可以将 Workbox 策略配置为将一组状态代码视为符合缓存条件，方法是将 CacheableResponsePlugin 实例添加到策略的 plugins 参数：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

此配置会告知 Workbox，在处理针对 https://third-party.example.com/images/ 的请求的响应时，缓存状态代码为 0 或 200 的所有请求。

根据标头进行缓存

您可以配置 Workbox 策略，以便在构建插件时设置 headers 对象，以检查是否存在特定标头值作为添加到缓存的条件：

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

在处理包含 /path/to/api/ 的请求网址的响应时，请查看名为 X-Is-Cacheable 的标头（该标头将由服务器添加到响应中）。如果该标头存在且设置为值“true”，则可以缓存响应。

如果指定了多个标头，则只需其中一个标头与关联的值匹配即可。

基于标头和状态代码进行缓存

您可以混合使用状态和标题配置。必须同时满足这两个条件，响应才会被视为可缓存；换句话说，响应必须具有其中一个配置的状态代码，并且必须具有至少一个提供的标头。

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

默认值是什么？

如果您使用 Workbox 的某个内置策略，但未明确指明 配置 cacheableResponse.CacheableResponsePlugin 时，默认条件是 用于确定是否应从网络接收响应 被缓存：

  • staleWhileRevalidate 和 networkFirst：状态为 0（即不透明响应）或 200 的响应被视为可缓存。
  • cacheFirst：状态为 200 的响应被视为可缓存。

默认情况下，响应标头不用于确定可缓存性。

为什么有不同的默认值？

默认值与状态为 0 的响应是否有所不同 （即不透明响应） 最终将缓存起来由于不透明响应的“黑盒”特性，服务工件无法知道响应是否有效，或者响应是否反映了从跨源服务器返回的错误响应。

对于包含更新缓存响应的方法的策略 例如 stalewhileRevalidate 和 networkFirst 因此可避免暂时性错误响应 缓存已更新，则有望使用正确且成功的响应。

对于涉及缓存收到的第一个响应并无限期重复使用该缓存响应的策略，缓存和重复使用暂时性错误的后果更为严重。默认情况下，为确保安全，cacheFirst 会拒绝保存响应，除非响应的状态代码为 200。

高级用法

如果您想在 Workbox 策略之外使用相同的缓存逻辑， 可以直接使用 CacheableResponse 类。

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new