서비스 워커가 처음 도입되었을 때 일련의 공통 캐싱 전략이 나타났습니다. 캐싱 전략은 서비스 워커가 가져오기 이벤트를 수신한 후 응답을 생성하는 방법을 결정하는 패턴입니다.
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()
프로미스를 즉시 해결합니다.
커스텀 캐시 네트워크 경합 전략
다음 예는 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
-
-
cacheName
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
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
-
-
cacheName
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
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
-
-
cacheName
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
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
-
-
cacheName
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
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
-
-
cacheName
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
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
문자열
-
fetchOptions
RequestInit 선택사항
-
matchOptions
CacheQueryOptions 선택사항
-
플러그인
-
_awaitComplete
void
_awaitComplete
함수는 다음과 같습니다.(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
프로미스<응답>
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
함수는 다음과 같습니다.(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
요청
요청
-
event
ExtendableEvent
-
returns
프로미스<응답>
-
-
_핸들
void
_handle
함수는 다음과 같습니다.(request: Request, handler: StrategyHandler) => {...}
-
요청
요청
-
handler
-
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) => {...}
-
전략
-
returns
-
-
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"
) => {...}-
요청
요청
-
모드
"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[] 선택사항