작업 상자 캐시 가능 응답

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

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.
}