작업 상자 전략

서비스 워커가 처음 도입되었을 때 일련의 일반적인 캐싱 전략이 등장했습니다. 캐싱 전략은 서비스 워커가 가져오기 이벤트를 수신한 후 응답을 생성하는 방식을 결정하는 패턴입니다.

workbox-strategies는 가장 일반적인 캐싱 전략을 제공하므로 이를 서비스 워커에 쉽게 적용할 수 있습니다.

Workbox에서 지원하는 전략 외에는 자세히 다루지 않겠지만 오프라인 레시피북에서 자세히 알아보세요.

전략 사용

다음 예에서는 workbox-routing와 함께 Workbox 캐싱 전략을 사용하는 방법을 보여줍니다. 각 전략으로 정의할 수 있는 몇 가지 옵션이 있으며 이는 이 문서의 전략 구성 섹션에 설명되어 있습니다.

고급 사용 섹션에서는 workbox-routing 없이 캐싱 전략을 직접 사용하는 방법을 설명합니다.

Stale-While-Revalidate

재검증 중 비활성 다이어그램

stale-while-revalidate 패턴을 사용하면 캐시된 응답이 있는 경우 캐시된 응답으로 최대한 빨리 요청에 응답하고 캐시되지 않은 경우 네트워크 요청으로 대체할 수 있습니다. 그런 다음 네트워크 요청이 캐시를 업데이트하는 데 사용됩니다. 비활성 상태에서 재검증의 일부 구현과 달리 이 전략은 캐시된 응답의 경과 시간과 관계없이 항상 재검증 요청을 실행합니다.

이는 최신 리소스를 보유하는 것이 애플리케이션에 중요하지 않은 경우에 사용하는 매우 일반적인 전략입니다.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

캐시 우선 (캐시가 네트워크로 대체됨)

캐시 첫 번째 다이어그램

오프라인 웹 앱은 캐시를 많이 사용하지만 중요하지 않고 점진적으로 캐시할 수 있는 애셋의 경우 캐시 우선이 가장 좋은 방법입니다.

캐시에 응답이 있으면 캐시된 응답을 사용하여 요청이 처리되고 네트워크는 전혀 사용되지 않습니다. 캐시된 응답이 없으면 요청이 네트워크 요청으로 처리되고 응답이 캐시되어 다음 요청이 캐시에서 직접 제공됩니다.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

네트워크 우선 (네트워크가 캐시로 폴백)

네트워크 첫 번째 다이어그램

자주 업데이트되는 요청의 경우 네트워크 우선 전략이 이상적인 솔루션입니다. 기본적으로 네트워크에서 최신 응답을 가져오려고 시도합니다. 요청이 성공하면 응답이 캐시에 저장됩니다. 네트워크에서 응답을 반환하지 못하면 캐시된 응답이 사용됩니다.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

네트워크 전용

네트워크 전용 다이어그램

네트워크에서 특정 요청을 처리해야 하는 경우 네트워크 전용 전략을 사용해야 합니다.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

캐시 전용

캐시 전용 다이어그램

캐시 전용 전략은 응답이 캐시에서 가져와지도록 합니다. 이는 Workbox에서는 흔하지 않지만 자체 미리 캐싱 단계가 있는 경우 유용할 수 있습니다.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

전략 구성

모든 전략을 사용하면 다음을 구성할 수 있습니다.

  • 전략에 사용할 캐시의 이름입니다.
  • 전략에 사용할 캐시 만료 제한사항입니다.
  • 요청을 가져오고 캐시할 때 수명 주기 메서드가 호출되는 플러그인의 배열입니다.

전략에서 사용하는 캐시 변경

캐시 이름을 제공하여 사용되는 캐시 전략을 변경할 수 있습니다. 이는 디버깅에 도움이 되도록 애셋을 분리하려는 경우에 유용합니다.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

플러그인 사용

Workbox에는 이러한 전략과 함께 사용할 수 있는 플러그인 세트가 함께 제공됩니다.

이러한 플러그인 (또는 맞춤 플러그인)을 사용하려면 인스턴스를 plugins 옵션에 전달하기만 하면 됩니다.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

맞춤 전략

Workbox를 사용하면 전략을 구성하는 것 외에도 자체 맞춤 전략을 만들 수 있습니다. workbox-strategies에서 Strategy 기본 클래스를 가져와 확장하면 됩니다.

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

이 예시에서 handle()는 특정 처리 로직을 정의하는 요청 전략으로 사용됩니다. 사용할 수 있는 요청 전략에는 두 가지가 있습니다.

  • handle(): 요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.
  • handleAll(): handle()와 비슷하지만 Promise 객체 2개를 반환합니다. 첫 번째는 handle()가 반환하는 것과 같고 두 번째는 전략 내에서 event.waitUntil()에 추가된 Promise가 완료되면 확인됩니다.

두 요청 전략은 다음 두 매개변수로 호출됩니다.

  • request: 전략에서 응답을 반환할 Request입니다.
  • handler: 현재 전략에 대해 자동으로 생성된 StrategyHandler 인스턴스입니다.

새로운 전략 수립

다음은 NetworkOnly의 동작을 다시 구현하는 새로운 전략의 예입니다.

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

네이티브 fetch 메서드 대신 handler.fetch()가 호출되는 방식에 유의하세요. StrategyHandler 클래스는 handle() 또는 handleAll()가 사용될 때마다 사용할 수 있는 여러 가져오기 및 캐시 작업을 제공합니다.

  • fetch: 지정된 요청을 가져오고 requestWillFetch(), fetchDidSucceed(), fetchDidFail() 플러그인 수명 주기 메서드를 호출합니다.
  • cacheMatch: 캐시의 요청과 일치시키고 cacheKeyWillBeUsed() 및 cachedResponseWillBeUsed() 플러그인 수명 주기 메서드를 호출합니다.
  • cachePut: 요청/응답 쌍을 캐시에 저장하고 cacheKeyWillBeUsed(), cacheWillUpdate(), cacheDidUpdate() 플러그인 수명 주기 메서드를 호출합니다.
  • fetchAndCachePut: fetch()를 호출하고 fetch()에서 생성된 응답에 대해 백그라운드에서 cachePut()를 실행합니다.
  • hasCallback: 콜백을 입력으로 사용하고 전략에 지정된 콜백이 있는 플러그인이 하나 이상 있는 경우 true를 반환합니다.
  • runCallbacks: 지정된 이름과 일치하는 모든 플러그인 콜백을 순서대로 실행하고 지정된 매개변수 객체 (현재 플러그인 상태와 병합됨)를 유일한 인수로 전달합니다.
  • iterateCallbacks: 콜백을 수락하고 일치하는 플러그인 콜백의 반복 가능한 객체를 반환합니다.여기서 각 콜백은 현재 핸들러 상태로 래핑됩니다. 즉, 각 콜백을 호출할 때 전달하는 객체 매개변수는 플러그인의 현재 상태와 병합됩니다.
  • waitUntil: 처리 중인 요청과 연결된 이벤트의 전체 기간 연장 약속 (일반적으로 FetchEvent)에 약속을 추가합니다.
  • doneWaiting: waitUntil()에 전달된 모든 Promise가 처리되면 해결되는 Promise를 반환합니다.
  • destroy: 전략 실행을 중지하고 대기 중인 waitUntil() 약속을 즉시 해결합니다.

맞춤 캐시 네트워크 경합 전략

다음 예는 Workbox에서 제공하지 않는 오프라인 레시피의 cache-network-race를 기반으로 하지만 한 단계 더 나아가 네트워크 요청이 성공하면 항상 캐시를 업데이트합니다. 다음은 여러 액션을 사용하는 더 복잡한 전략의 예입니다.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

고급 사용

자체 가져오기 이벤트 로직에서 전략을 사용하려면 전략 클래스를 사용하여 특정 전략을 통해 요청을 실행하면 됩니다.

예를 들어 비활성 상태에서 재검증 전략을 사용하려면 다음을 실행하면 됩니다.

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

사용 가능한 클래스의 목록은 workbox-strategies 참조 문서에서 확인할 수 있습니다.

유형

CacheFirst

캐시 우선 요청 전략의 구현입니다.

캐시 우선 전략은 /styles/example.a8f5f1.css와 같은 URL과 같이 버전이 지정된 애셋에 유용합니다. 이러한 애셋은 장기간 캐시될 수 있기 때문입니다.

네트워크 요청이 실패하고 캐시 일치가 없으면 WorkboxError 예외가 발생합니다.

속성

  • 생성자

    void

    전략의 새 인스턴스를 만들고 문서화된 모든 옵션 속성을 공개 인스턴스 속성으로 설정합니다.

    참고: 맞춤 전략 클래스가 기본 Strategy 클래스를 확장하고 이러한 속성 외의 속성이 필요하지 않은 경우 자체 생성자를 정의할 필요가 없습니다.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

CacheOnly

캐시 전용 요청 전략의 구현입니다.

이 클래스는 Workbox 플러그인을 활용하려는 경우에 유용합니다.

캐시 일치 항목이 없으면 WorkboxError 예외가 발생합니다.

속성

  • 생성자

    void

    전략의 새 인스턴스를 만들고 문서화된 모든 옵션 속성을 공개 인스턴스 속성으로 설정합니다.

    참고: 맞춤 전략 클래스가 기본 Strategy 클래스를 확장하고 이러한 속성 외의 속성이 필요하지 않은 경우 자체 생성자를 정의할 필요가 없습니다.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

NetworkFirst

네트워크 우선 요청 전략의 구현입니다.

기본적으로 이 전략은 200 상태 코드가 있는 응답과 불투명 응답을 캐시합니다. 불투명 응답은 응답이 CORS를 지원하지 않는 교차 출처 요청입니다.

네트워크 요청이 실패하고 캐시 일치가 없으면 WorkboxError 예외가 발생합니다.

속성

  • 생성자

    void

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

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

NetworkFirstOptions

속성

  • cacheName

    문자열 선택사항

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • networkTimeoutSeconds

    번호 선택사항

  • 플러그인

    WorkboxPlugin[] 선택사항

NetworkOnly

네트워크 전용 요청 전략의 구현입니다.

이 클래스는 Workbox 플러그인을 활용하려는 경우에 유용합니다.

네트워크 요청이 실패하면 WorkboxError 예외가 발생합니다.

속성

  • 생성자

    void

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

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

NetworkOnlyOptions

속성

  • fetchOptions

    RequestInit 선택사항

  • networkTimeoutSeconds

    번호 선택사항

  • 플러그인

    WorkboxPlugin[] 선택사항

StaleWhileRevalidate

stale-while-revalidate 요청 전략의 구현입니다.

리소스는 캐시와 네트워크에서 동시에 요청됩니다. 전략은 캐시된 버전이 있는 경우 캐시된 버전으로 응답하고, 그렇지 않은 경우에는 네트워크 응답을 기다립니다. 요청이 성공할 때마다 캐시가 네트워크 응답으로 업데이트됩니다.

기본적으로 이 전략은 200 상태 코드가 있는 응답과 불투명 응답을 캐시합니다. 불투명 응답은 응답이 CORS를 지원하지 않는 교차 출처 요청입니다.

네트워크 요청이 실패하고 캐시 일치가 없으면 WorkboxError 예외가 발생합니다.

속성

  • 생성자

    void

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

    (options?: StrategyOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

Strategy

다른 모든 전략 클래스가 확장해야 하는 추상 기본 클래스입니다.

속성

  • 생성자

    void

    전략의 새 인스턴스를 만들고 문서화된 모든 옵션 속성을 공개 인스턴스 속성으로 설정합니다.

    참고: 맞춤 전략 클래스가 기본 Strategy 클래스를 확장하고 이러한 속성 외의 속성이 필요하지 않은 경우 자체 생성자를 정의할 필요가 없습니다.

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

    (options?: StrategyOptions) => {...}

  • cacheName

    문자열

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • 요청

      요청

    • event

      ExtendableEvent

    • returns

      Promise&lt;void&gt;

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • _handle

    void

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

    (request: Request, handler: StrategyHandler) => {...}

    • returns

      Promise<Response>

  • 핸들

    void

    요청 전략을 실행하고 Response로 확인될 Promise를 반환하여 모든 관련 플러그인 콜백을 호출합니다.

    전략 인스턴스가 Workbox workbox-routing.Route에 등록되면 경로가 일치할 때 이 메서드가 자동으로 호출됩니다.

    또는 이 메서드를 event.respondWith()에 전달하여 독립형 FetchEvent 리스너에서 사용할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle와 유사하지만 Response로 확인되는 Promise를 반환하는 대신 [response, done] 프로미스의 튜플을 반환합니다. 여기서 앞의 프로미스(response)는 handle()가 반환하는 것과 동일하고 뒤의 프로미스는 전략 실행의 일환으로 event.waitUntil()에 추가된 프로미스가 완료되면 확인되는 프로미스입니다.

    done 약속을 기다려 전략에서 실행하는 추가 작업 (일반적으로 응답 캐싱)이 성공적으로 완료되도록 할 수 있습니다.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • returns

      [Promise<Response>, Promise<void>]

      응답이 해결되는 시점과 핸들러가 모든 작업을 완료한 시점을 확인하는 데 사용할 수 있는 [response, done] 약속의 튜플입니다.

StrategyHandler

Strategy 인스턴스 인스턴스가 workbox-strategies.Strategy~handle 또는 workbox-strategies.Strategy~handleAll를 호출할 때마다 생성되는 클래스로, 플러그인 콜백을 중심으로 모든 가져오기 및 캐시 작업을 래핑하고 전략이 '완료'된 시점(즉, 추가된 모든 event.waitUntil() 프로미스가 해결된 시점)을 추적합니다.

속성

  • 생성자

    void

    전달된 전략 및 요청을 처리하는 이벤트와 연결된 새 인스턴스를 만듭니다.

    또한 생성자는 이 요청을 처리하는 각 플러그인에 전달될 상태를 초기화합니다.

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • event

    ExtendableEvent

  • params

    any 선택사항

  • 요청

    요청

  • URL

    URL(선택사항)

  • cacheMatch

    void

    전략 객체에 정의된 cacheName, matchOptions, plugins를 사용하여 캐시의 요청을 일치시키고 관련 플러그인 콜백 메서드를 호출합니다.

    이 메서드를 사용하면 다음 플러그인 수명 주기 메서드가 호출됩니다.

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

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

    (key: RequestInfo) => {...}

    • 키

      RequestInfo

      캐시 키로 사용할 요청 또는 URL입니다.

    • returns

      Promise<Response>

      일치하는 응답(있는 경우)

  • cachePut

    void

    전략 객체에 정의된 cacheName 및 plugins를 사용하여 요청/응답 쌍을 캐시에 넣고 관련 플러그인 콜백 메서드를 호출합니다.

    이 메서드를 사용하면 다음 플러그인 수명 주기 메서드가 호출됩니다.

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

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

    (key: RequestInfo, response: Response) => {...}

    • 키

      RequestInfo

      캐시 키로 사용할 요청 또는 URL입니다.

    • 응답

      응답

      캐시할 응답입니다.

    • returns

      Promise<boolean>

      cacheWillUpdate로 인해 응답이 캐시되지 않은 경우 false이고, 그렇지 않은 경우 true입니다.

  • 소멸

    void

    전략 실행을 중지하고 대기 중인 waitUntil() 약속을 즉시 해결합니다.

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

    () => {...}

  • doneWaiting

    void

    workbox-strategies.StrategyHandler~waitUntil에 전달된 모든 프로미스가 처리된 후에 해결되는 프로미스를 반환합니다.

    참고: doneWaiting()가 정착된 후에 실행되는 모든 작업은 이 핸들러의 waitUntil() 메서드가 아닌 이벤트의 waitUntil() 메서드에 수동으로 전달되어야 합니다. 그러지 않으면 작업이 완료되기 전에 서비스 워커 스레드가 종료될 수 있습니다.

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

    () => {...}

    • returns

      Promise&lt;void&gt;

  • 가져오기

    void

    Strategy 객체에 정의된 fetchOptions(탐색 외 요청의 경우) 및 plugins를 사용하여 지정된 요청을 가져오고 관련 플러그인 콜백 메서드를 호출합니다.

    이 메서드를 사용하면 다음 플러그인 수명 주기 메서드가 호출됩니다.

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • 입력

      RequestInfo

      가져올 URL 또는 요청입니다.

    • returns

      Promise<Response>

  • fetchAndCachePut

    void

    this.fetch()를 호출하고 백그라운드에서 this.fetch()에서 생성된 응답에 this.cachePut()를 실행합니다.

    this.cachePut() 호출은 this.waitUntil()를 자동으로 호출하므로 이벤트에서 waitUntil()를 수동으로 호출할 필요가 없습니다.

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

    (input: RequestInfo) => {...}

    • 입력

      RequestInfo

      가져오고 캐시할 요청 또는 URL입니다.

    • returns

      Promise<Response>

  • getCacheKey

    void

    cacheKeyWillBeUsed 콜백의 플러그인 목록을 확인하고 순서대로 발견된 콜백을 실행합니다. 마지막 플러그인이 반환한 최종 Request 객체는 캐시 읽기 또는 쓰기의 캐시 키로 처리됩니다. 등록된 cacheKeyWillBeUsed 플러그인 콜백이 없으면 전달된 요청이 수정되지 않은 상태로 반환됩니다.

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • 요청

      요청

    • 모드

      '읽기'
       | '쓰기'

    • returns

      Promise<Request>

  • hasCallback

    void

    전략에 지정된 콜백이 있는 플러그인이 하나 이상 있는 경우 true를 반환합니다.

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

    (name: C) => {...}

    • 이름

      C

      확인할 콜백의 이름입니다.

    • returns

      부울

  • iterateCallbacks

    void

    콜백을 수락하고 일치하는 플러그인 콜백의 반복 가능한 객체를 반환합니다.여기서 각 콜백은 현재 핸들러 상태로 래핑됩니다. 즉, 각 콜백을 호출할 때 전달하는 모든 객체 매개변수가 플러그인의 현재 상태와 병합됩니다.

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

    (name: C) => {...}

    • 이름

      C

      실행할 콜백의 이름

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    지정된 이름과 일치하는 모든 플러그인 콜백을 순서대로 실행하고 지정된 매개변수 객체 (현재 플러그인 상태와 병합됨)를 유일한 인수로 전달합니다.

    참고: 이 메서드는 모든 플러그인을 실행하므로 다음 콜백을 호출하기 전에 콜백의 반환 값을 적용해야 하는 경우에는 적합하지 않습니다. 케이스를 처리하는 방법은 아래 workbox-strategies.StrategyHandler#iterateCallbacks를 참고하세요.

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • 이름

      C

      각 플러그인 내에서 실행할 콜백의 이름입니다.

    • param

      Omit<indexedAccess"state"
      >

      각 콜백을 실행할 때 첫 번째 (유일한) 매개변수로 전달할 객체입니다. 이 객체는 콜백 실행 전에 현재 플러그인 상태와 병합됩니다.

    • returns

      Promise&lt;void&gt;

  • waitUntil

    void

    처리 중인 요청과 연결된 이벤트 이벤트 (일반적으로 FetchEvent)의 [수명 연장 약속]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises에 약속을 추가합니다.

    참고: 추가된 모든 약속이 처리되었는지 확인하려면 workbox-strategies.StrategyHandler~doneWaiting를 기다리면 됩니다.

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

    (promise: Promise<T>) => {...}

    • promise

      Promise<T>

      요청을 트리거한 이벤트의 수명 연장 프라미스에 추가할 프라미스입니다.

    • returns

      Promise<T>

StrategyOptions

속성

  • cacheName

    문자열 선택사항

  • fetchOptions

    RequestInit 선택사항

  • matchOptions

    CacheQueryOptions 선택사항

  • 플러그인

    WorkboxPlugin[] 선택사항