작업 상자 캐시 가능 응답

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

workbox-cacheable-response 모듈은 응답을 기준으로 응답을 캐시해야 하는지 숫자 상태 코드 포드의 존재는 헤더 특정 값 또는 이 둘의 조합으로 지정할 수 있습니다

상태 코드 기반 캐싱

전략의 plugins 매개변수에 CacheableResponsePlugin 인스턴스를 추가하여 일련의 상태 코드를 캐시할 수 있는 것으로 간주하도록 Workbox 전략을 구성할 수 있습니다.

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에 알려줍니다.

참고: 상태 코드 0는 다음에 사용됩니다. 불투명한 대답.

헤더를 기반으로 한 캐싱

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

기본값은 무엇인가요?

명시적으로 설명 없이 Workbox의 기본 전략 중 하나를 사용하는 경우 cacheableResponse.CacheableResponsePlugin를 구성할 때 기본 기준은 다음과 같습니다. 네트워크에서 수신된 응답이 응답해야 하는지 캐시되어야 합니다.

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

기본적으로 응답 헤더는 캐시 가능성을 결정하는 데 사용되지 않습니다.

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

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

캐시된 응답을 업데이트하는 몇 가지 수단을 포함하는 전략의 경우, 예컨대 비활성 요청 재검증 및 네트워크 우선 거래와 같은 경우, 전체 IP를 오류가 다시 반환되면 캐시가 업데이트되면 적절하고 성공적인 응답이 사용될 것입니다.

수신된 첫 번째 응답을 캐시하고 캐시된 응답을 무기한 재사용하는 전략의 경우 일시적인 오류가 캐시되고 재사용되면서 발생하는 영향이 더 심각합니다. 자세한 내용은 기본적으로, 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.
}

유형

CacheableResponse

이 클래스를 사용하면 먼저 상태 코드 및/또는 헤더가 있어야만 Response 캐시 가능한 것으로 간주됩니다.

속성

• 생성자

  void

  새 CacheableResponse 인스턴스를 생성하려면 최소한 config 속성 중 하나입니다.

  statuses 및 headers를 모두 지정할 경우 두 조건이 모두 충족되어야 합니다. 충족되어야 Response가 캐시 가능한 것으로 간주됩니다.

  constructor 함수는 다음과 같습니다.

  (config?: CacheableResponseOptions) => {...}

  • config

    CacheableResponseOptions 선택사항

  • returns

    CacheableResponse

• isResponseCacheable

  void

  다음을 기반으로 응답을 캐시할 수 있는지 여부를 확인합니다. 객체의 구성을 정의합니다

  isResponseCacheable 함수는 다음과 같습니다.

  (response: Response) => {...}

  • 응답

    응답

    캐시 가능성이 있는 응답 선택합니다.

  • returns

    부울

    Response가 캐시 가능한 경우 true, false 없습니다.

CacheableResponseOptions

속성

• 헤더

  객체 선택사항

• 상태

  number[] 선택사항

CacheableResponsePlugin

cacheWillUpdate 수명 주기 콜백을 구현하는 클래스입니다. 이렇게 하면 Workbox의 내장 전략을 통해 이루어진 요청에 캐시 가능성 검사를 더 쉽게 추가할 수 있습니다.

속성

• 생성자

  void

  새 CacheableResponsePlugin 인스턴스를 생성하려면 config 속성 중 하나 이상을 제공해야 합니다.

  statuses와 headers가 모두 지정된 경우 Response가 캐시 가능으로 간주되려면 두 조건을 모두 충족해야 합니다.

  constructor 함수는 다음과 같습니다.

  (config: CacheableResponseOptions) => {...}

  • config

    CacheableResponseOptions

  • returns

    CacheableResponsePlugin