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

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

Модуль 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. }