кэшируемый-ответ рабочего ящика

При кэшировании ресурсов во время выполнения не существует единого правила, определяющего, является ли данный ответ «действительным» и может ли он быть сохранен и повторно использован.

Модуль 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',
        },
      }),
    ],
  })
);

При обработке ответов на URL-адреса запроса, содержащие /path/to/api/ , обратите внимание на заголовок с именем X-Is-Cacheable (который будет добавлен к ответу сервером). Если этот заголовок присутствует и для него установлено значение «истина», то ответ можно кэшировать.

Если указано несколько заголовков, то только один из заголовков должен соответствовать связанным значениям.

Кэширование на основе заголовков и кодов состояния

Вы можете комбинировать статус и конфигурацию заголовка. Оба условия должны быть выполнены, чтобы ответ считался кэшируемым; другими словами, ответ должен иметь один из настроенных кодов состояния и хотя бы один из предоставленных заголовков.

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 CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}