작업 상자 전략

서비스 워커가 처음 도입되었을 때 일련의 공통 캐싱 전략이 나타났습니다. 캐싱 전략은 서비스 워커가 가져오기 이벤트를 수신한 후 응답을 생성하는 방법을 결정하는 패턴입니다.

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

Workbox에서 지원하는 전략에 관해서는 자세히 다루지 않지만 오프라인 설명서에서 자세히 알아보세요.

전략 사용

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

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

비활성 상태 재확인

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());

캐시 전용

캐시 전용 전략은 캐시에서 응답을 가져오도록 합니다. 이 방법은 작업 상자에서는 일반적이지 않지만 자체 사전 캐싱 단계가 있는 경우 유용할 수 있습니다.

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 객체를 반환합니다. 첫 번째는 handle()가 반환하는 내용과 동일하며 두 번째는 전략 내에서 event.waitUntil()에 추가된 프로미스가 완료되면 확인됩니다.

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

• 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()에 전달된 모든 프로미스가 해결되면 확인되는 프로미스를 반환합니다.
• destroy: 전략 실행을 중지하고 대기 중인 waitUntil() 프로미스를 즉시 해결합니다.

참고: 각 작업에서 허용하는 모든 매개변수를 보려면 StrategyHandler의 소스 구현을 참고하세요.

커스텀 캐시 네트워크 경합 전략

다음 예는 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

캐시 우선 요청 전략의 구현

캐시 우선 전략은 오랫동안 캐시될 수 있으므로 URL과 같이 수정된 애셋(예: /styles/example.a8f5f1.css)에 유용합니다.

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

속성

• 생성자

  void

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

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

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

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

  • 옵션

    StrategyOptions 선택사항

  • returns

    CacheFirst

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

CacheOnly

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

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

일치하는 캐시가 없으면 WorkboxError 예외가 발생합니다.

속성

• 생성자

  void

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

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

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

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

  • 옵션

    StrategyOptions 선택사항

  • returns

    CacheOnly

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

NetworkFirst

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

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

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

속성

• 생성자

  void

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

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

  • 옵션

    NetworkFirstOptions 선택사항

  • returns

    NetworkFirst

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

NetworkFirstOptions

속성

• cacheName

  문자열 선택사항

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• networkTimeoutSeconds

  number 선택사항

• 플러그인

  WorkboxPlugin[] 선택사항

NetworkOnly

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

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

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

속성

• 생성자

  void

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

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

  • 옵션

    NetworkOnlyOptions 선택사항

  • returns

    NetworkOnly

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

NetworkOnlyOptions

속성

• fetchOptions

  RequestInit 선택사항

• networkTimeoutSeconds

  number 선택사항

• 플러그인

  WorkboxPlugin[] 선택사항

StaleWhileRevalidate

stale-while-revalidate 요청 전략을 실행합니다.

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

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

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

속성

• 생성자

  void

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

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

  • 옵션

    StrategyOptions 선택사항

  • returns

    StaleWhileRevalidate

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

Strategy

다른 모든 전략 클래스에서 확장해야 하는 추상 기본 클래스:

속성

• 생성자

  void

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

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

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

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

  • 옵션

    StrategyOptions 선택사항

  • returns

    전략

• cacheName

  string

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[]

• _awaitComplete

  void

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

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

  • responseDone

    프로미스<응답>

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • 요청

    요청

  • event

    ExtendableEvent

  • returns

    프로미스<응답>

• _핸들

  void

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

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

  • 요청

    요청

  • handler

    StrategyHandler

  • returns

    프로미스<응답>

• 핸들

  void

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

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

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

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    프로미스<응답>

• handleAll

  void

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

  done 프로미스를 기다렸다가 전략에서 수행되는 추가 작업 (일반적으로 응답 캐싱)이 완료되도록 할 수 있습니다.

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

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

  • 옵션

    FetchEvent|HandlerCallbackOptions

    FetchEvent 또는 아래 나열된 속성이 포함된 객체입니다.

  • returns

    [Promise<Response>,Promise<void>]

    응답이 결정되는 시점과 핸들러가 모든 작업을 완료한 시점을 결정하는 데 사용할 수 있는 [응답, 완료] 프로미스의 튜플입니다.

StrategyHandler

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

속성

• 생성자

  void

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

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

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

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

  • 전략

    전략

  • 옵션

    HandlerCallbackOptions

  • returns

    StrategyHandler

• event

  ExtendableEvent

• params

  모든 선택사항

• 요청

  요청

• url

  URL 선택사항

• cacheMatch

  void

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

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

  • cacheKeyWillByUsed()
  • cachedResponseWillByUsed()

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

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

  • 키

    RequestInfo

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

  • returns

    프로미스<응답>

    일치하는 응답입니다(있는 경우).

• cachePut

  void

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

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

  • cacheKeyWillByUsed()
  • cacheWillUpdate()
  • cacheDidUpdate()

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

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

  • 키

    RequestInfo

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

  • 응답

    응답

    캐시에 대한 응답입니다.

  • returns

    Promise<boolean>

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

• destroy

  void

  전략 실행을 중지하고 대기 중인 waitUntil() 프로미스를 즉시 해결합니다.

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

  ()=> {...}

• doneWaiting

  void

  workbox-strategies.StrategyHandler~waitUntil에 전달된 모든 프로미스가 결정되면 확인되는 프로미스를 반환합니다.

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

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

  ()=> {...}

  • returns

    Promise<void>

• fetch

  void

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

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

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

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

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

  • 입력

    RequestInfo

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

  • returns

    프로미스<응답>

• fetchAndCachePut

  void

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

  this.cachePut()를 호출하면 자동으로 this.waitUntil()가 호출되므로 이벤트에서 waitUntil()를 수동으로 호출하지 않아도 됩니다.

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

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

  • 입력

    RequestInfo

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

  • returns

    프로미스<응답>

• getCacheKey

  void

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

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

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

  • 요청

    요청

  • 모드

  • returns

    프로미스<요청>

• hasCallback

  void

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

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

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

  • 이름

    C

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

  • returns

    boolean

• iterateCallbacks

  void

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

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

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

  • 이름

    C

    실행할 콜백의 이름

  • returns

    생성기<NonNullable<indexedAccess>anyunknown>

• runCallbacks

  void

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

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

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

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

  • 이름

    C

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

  • param

    Omit<indexedAccess"state"
    >

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

  • returns

    Promise<void>

• waitUntil

  void

  처리 중인 요청과 연결된 이벤트 이벤트의 [전체 기간 프로미스 연장]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises (일반적으로 FetchEvent)에 프로미스를 추가합니다.

  참고: 추가된 모든 프로미스가 결정되면 workbox-strategies.StrategyHandler~doneWaiting에서 이를 알 수 있도록 기다릴 수 있습니다.

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

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

  • 약속

    Promise<T>

    요청을 트리거한 이벤트의 전체 기간 연장 프로미스에 추가할 프로미스입니다.

  • returns

    Promise<T>

StrategyOptions

속성

• cacheName

  문자열 선택사항

• fetchOptions

  RequestInit 선택사항

• matchOptions

  CacheQueryOptions 선택사항

• 플러그인

  WorkboxPlugin[] 선택사항