작업 상자 캐시 가능 응답

런타임 시 애셋을 캐싱할 때 주어진 응답이 '유효'하고 저장 및 재사용될 수 있는지에 관한 일률적인 규칙은 없습니다.

workbox-cacheable-response 모듈은 숫자 상태 코드, 특정 값을 가진 헤더의 존재 또는 이 둘의 조합을 기반으로 응답을 캐시해야 하는지 결정하는 표준 방법을 제공합니다.

상태 코드에 따른 캐싱

전략의 plugins 매개변수에 CacheableResponsePlugin 인스턴스를 추가하여 상태 코드 집합을 캐싱 가능한 것으로 간주하도록 작업 상자 전략을 구성할 수 있습니다.

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

이 구성은 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/가 포함된 요청 URL의 응답을 처리할 때는 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',
        },
      }),
    ],
  })
);

기본값이란 무엇인가요?

cacheableResponse.CacheableResponsePlugin를 명시적으로 구성하지 않고 Workbox의 기본 제공 전략 중 하나를 사용하는 경우 네트워크에서 수신된 응답을 캐시해야 하는지 결정하는 데 다음 기본 기준이 사용됩니다.

• StatefulSet 기간 Revalidate 및 networkFirst: 0 상태(즉, 불투명 응답) 또는 200인 응답은 캐시 가능한 것으로 간주됩니다.
• cacheFirst: 200 상태의 응답은 캐시 가능한 것으로 간주됩니다.

기본적으로 응답 헤더는 캐시 가능 여부를 확인하는 데 사용되지 않습니다.

기본값이 다른 이유는 무엇인가요?

기본값은 0 상태의 응답(즉, 불투명 응답)이 캐시되는지 여부에 따라 다릅니다. 불투명한 응답의 '블랙박스' 특성으로 인해 서비스 워커는 응답이 유효한지 또는 교차 출처 서버에서 반환된 오류 응답을 반영하는지 여부를 알 수 없습니다.

캐시된 응답을 업데이트하는 몇 가지 수단이 포함된 전략의 경우(예: StatefulSet와 networkFirst) 일시적인 오류 응답을 캐시할 위험이 줄어듭니다. 그러면 다음에 캐시가 업데이트될 때 적절하고 성공적인 응답이 사용되기 때문에 일시적인 오류 응답을 캐시할 위험이 줄어듭니다.

수신된 첫 번째 응답을 캐시하고 캐시된 응답을 무기한 재사용하는 전략의 경우 캐시되고 재사용되는 일시적인 오류로 인한 영향이 더 심각합니다. 기본적으로 안전 측에서 오류를 처리하기 위해 cacheFirst는 상태 코드가 200인 경우를 제외하고 응답 저장을 거부합니다.

고급 사용법

작업 상자 전략 외부에서 동일한 캐싱 로직을 사용하려면 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.
}