Workbox는 모듈식으로 빌드되어 개발자가 모든 항목을 단일 파일로 다운로드하지 않고도 사용할 부분을 선택할 수 있습니다.
하지만 모듈 간에 중복되는 부분이 있습니다. 예를 들어 각 모듈은 콘솔과 상호작용하고, 의미 있는 오류를 발생시키고, 네트워크 또는 캐시를 활용해야 합니다. 각 모듈이 동일한 로직을 구현하지 않도록 workbox-core에는 각 모듈에서 사용하는 이 공통 코드가 포함되어 있습니다.
이 모듈은 개발자에게 몇 가지 기능을 제공하지만 로그 수준 및 캐싱 외에도 workbox-core는 최종 개발자가 아닌 각 모듈에 내부 로직을 제공합니다.
기본 캐시 이름 보기 및 변경
Workbox는 cacheNames를 통해 캐시를 정의합니다.
import {cacheNames} from 'workbox-core';
console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);
이러한 캐시 이름은 접두사, 이름, 접미사 형식으로 구성되며, 여기서 이름은 캐시 사용에 따라 변경됩니다.
<prefix>-<cache-id>-<suffix>
setCacheNameDetails()에 전달된 값의 일부 또는 전부를 변경하여 이러한 기본 이름을 변경할 수 있습니다.
import {cacheNames, setCacheNameDetails} from 'workbox-core';
setCacheNameDetails({
prefix: 'my-app',
suffix: 'v1',
precache: 'install-time',
runtime: 'run-time',
googleAnalytics: 'ga',
});
// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);
// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);
// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);
접두사와 접미사의 주요 사용 사례는 여러 프로젝트에 Workbox를 사용하고 각 프로젝트에 동일한 localhost 포트를 사용하는 경우 각 모듈에 맞춤 접두사를 설정하면 캐시가 서로 충돌하지 않도록 할 수 있다는 것입니다.
고객 소유권 주장
일부 개발자는 새 서비스 워커를 게시하고 활성화되는 즉시 이미 열려 있는 웹페이지를 제어하도록 하려는 경우가 있습니다. 이는 기본적으로 발생하지 않습니다.
이러한 동작이 필요한 경우 workbox-core에서 도우미 메서드를 제공합니다.
import {clientsClaim} from 'workbox-core';
// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();
workbox-core의 clientsClaim() 메서드는 activate 이벤트 리스너를 서비스 워커에 자동으로 추가하고 그 내부에서 self.clients.claim()를 호출합니다. 현재 서비스 작업자가 활성화되기 전에 self.clients.claim()를 호출하면 런타임 예외가 발생하며 workbox-core의 래퍼는 적절한 시점에 호출할 수 있도록 도와줍니다.
skipWaiting 래퍼가 지원 중단됨
Workbox v6 이전에는 개발자가 workbox-core의 skipWaiting() 메서드도 사용하는 것이 좋습니다. 그러나 이 메서드는 개발자가 self.skipWaiting()를 명시적으로 호출할 때 얻을 수 있는 것 이상의 가치를 제공하지 않았습니다.
기존 workbox-core 래퍼는 self.skipWaiting()가 호출된 install 이벤트 핸들러도 등록했기 때문에 설치가 완료된 후 message와 같은 다른 이벤트 핸들러 내에서 호출되면 래퍼가 예상대로 작동하지 않았습니다.
이러한 이유로 workbox-core의 skipWaiting()는 지원 중단되었으며 개발자는 self.skipWaiting()를 직접 호출하는 것으로 전환해야 합니다. self.clients.claim()와 달리 self.skipWaiting()은 '잘못된' 시점에 호출되더라도 예외를 발생시키지 않으므로 이벤트 핸들러로 래핑할 필요가 없습니다.
유형
CacheDidUpdateCallback()
workbox-core.CacheDidUpdateCallback(
param: CacheDidUpdateCallbackParam,
)
매개변수
반환 값
-
Promise<void>
CacheDidUpdateCallbackParam
속성
-
cacheName
문자열
-
이벤트
ExtendableEvent
-
newResponse
응답
-
oldResponse
응답 선택사항
-
요청
요청
-
주
MapLikeObject 선택사항
CachedResponseWillBeUsedCallback()
workbox-core.CachedResponseWillBeUsedCallback(
param: CachedResponseWillBeUsedCallbackParam,
)
매개변수
반환 값
-
Promise<void | Response>
CachedResponseWillBeUsedCallbackParam
속성
-
cacheName
문자열
-
cachedResponse
응답 선택사항
-
이벤트
ExtendableEvent
-
matchOptions
CacheQueryOptions 선택사항
-
요청
요청
-
주
MapLikeObject 선택사항
CacheKeyWillBeUsedCallback()
workbox-core.CacheKeyWillBeUsedCallback(
param: CacheKeyWillBeUsedCallbackParam,
)
매개변수
반환 값
-
Promise<string | Request>
CacheKeyWillBeUsedCallbackParam
속성
-
이벤트
ExtendableEvent
-
모드
문자열
-
params
any 선택사항
-
요청
요청
-
주
MapLikeObject 선택사항
CacheWillUpdateCallback()
workbox-core.CacheWillUpdateCallback(
param: CacheWillUpdateCallbackParam,
)
매개변수
반환 값
-
Promise<void | Response>
CacheWillUpdateCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
응답
응답
-
주
MapLikeObject 선택사항
FetchDidFailCallback()
workbox-core.FetchDidFailCallback(
param: FetchDidFailCallbackParam,
)
매개변수
반환 값
-
Promise<void>
FetchDidFailCallbackParam
속성
-
오류
오류
-
이벤트
ExtendableEvent
-
originalRequest
요청
-
요청
요청
-
주
MapLikeObject 선택사항
FetchDidSucceedCallback()
workbox-core.FetchDidSucceedCallback(
param: FetchDidSucceedCallbackParam,
)
매개변수
반환 값
-
Promise<Response>
FetchDidSucceedCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
응답
응답
-
주
MapLikeObject 선택사항
HandlerCallbackOptions
HandlerDidCompleteCallback()
workbox-core.HandlerDidCompleteCallback(
param: HandlerDidCompleteCallbackParam,
)
매개변수
반환 값
-
Promise<void>
HandlerDidCompleteCallbackParam
속성
-
오류
오류 선택사항
-
이벤트
ExtendableEvent
-
요청
요청
-
응답
응답 선택사항
-
주
MapLikeObject 선택사항
HandlerDidErrorCallback()
workbox-core.HandlerDidErrorCallback(
param: HandlerDidErrorCallbackParam,
)
매개변수
반환 값
-
Promise<Response>
HandlerDidErrorCallbackParam
속성
-
오류
오류
-
이벤트
ExtendableEvent
-
요청
요청
-
주
MapLikeObject 선택사항
HandlerDidRespondCallback()
workbox-core.HandlerDidRespondCallback(
param: HandlerDidRespondCallbackParam,
)
매개변수
반환 값
-
Promise<void>
HandlerDidRespondCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
응답
응답 선택사항
-
주
MapLikeObject 선택사항
HandlerWillRespondCallback()
workbox-core.HandlerWillRespondCallback(
param: HandlerWillRespondCallbackParam,
)
매개변수
반환 값
-
Promise<Response>
HandlerWillRespondCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
응답
응답
-
주
MapLikeObject 선택사항
HandlerWillStartCallback()
workbox-core.HandlerWillStartCallback(
param: HandlerWillStartCallbackParam,
)
매개변수
반환 값
-
Promise<void>
HandlerWillStartCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
주
MapLikeObject 선택사항
ManualHandlerCallback()
workbox-core.ManualHandlerCallback(
options: ManualHandlerCallbackOptions,
)
'핸들러' 콜백은 Router가 RouteMatchCallback를 통해 Route의 URL/요청과 일치할 때마다 호출됩니다. 이 핸들러 콜백은 Response로 확인되는 Promise를 반환해야 합니다.
RouteMatchCallback에서 비어 있지 않은 배열이나 객체가 반환되면 이 핸들러의 options.params 인수로 전달됩니다.
매개변수
반환 값
-
Promise<Response>
ManualHandlerCallbackOptions
ManualHandlerCallback 함수에 전달된 옵션입니다.
속성
-
이벤트
ExtendableEvent
-
요청
문자열 | 요청
MapLikeObject
PluginState
지금은 일반 MapLikeObject를 사용하지만 향후 이를 확장/제한할 수 있습니다.
RequestWillFetchCallback()
workbox-core.RequestWillFetchCallback(
param: RequestWillFetchCallbackParam,
)
매개변수
반환 값
-
Promise<Request>
RequestWillFetchCallbackParam
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
주
MapLikeObject 선택사항
RouteHandler
RouteHandlerCallback 또는 RouteHandlerObject입니다.
경로 핸들러를 허용하는 workbox-routing의 대부분의 API는 둘 중 하나를 사용합니다.
RouteHandlerCallback()
workbox-core.RouteHandlerCallback(
options: RouteHandlerCallbackOptions,
)
'핸들러' 콜백은 Router가 RouteMatchCallback를 통해 Route의 URL/요청과 일치할 때마다 호출됩니다. 이 핸들러 콜백은 Response로 확인되는 Promise를 반환해야 합니다.
RouteMatchCallback에서 비어 있지 않은 배열이나 객체가 반환되면 이 핸들러의 options.params 인수로 전달됩니다.
매개변수
반환 값
-
Promise<Response>
RouteHandlerCallbackOptions
RouteHandlerCallback 함수에 전달된 옵션입니다.
속성
-
이벤트
ExtendableEvent
-
params
string[] | MapLikeObject 선택사항
-
요청
요청
-
URL
URL
RouteHandlerObject
RouteHandlerCallback 유형의 handle 메서드가 있는 객체
Route 객체는 RouteHandlerCallback 함수 또는 이 RouteHandler 객체를 사용하여 만들 수 있습니다. RouteHandler의 이점은 workbox-strategies 패키지에서와 같이 확장할 수 있다는 것입니다.
속성
RouteMatchCallback()
workbox-core.RouteMatchCallback(
options: RouteMatchCallbackOptions,
)
'일치' 콜백은 Route가 특정 URL 및 요청에 적용되어야 하는지 확인하는 데 사용됩니다. 클라이언트의 가져오기 이벤트에 대한 응답으로 일치가 발생하면 event 객체도 제공됩니다. 그러나 일치 콜백은 가져오기 이벤트 외부에서 호출될 수 있으므로 일치 로직은 event 객체를 항상 사용할 수 있다고 가정해서는 안 됩니다.
일치 콜백이 true 값을 반환하면 일치하는 경로의 RouteHandlerCallback가 즉시 호출됩니다. 반환된 값이 비어 있지 않은 배열 또는 객체인 경우 이 값이 핸들러의 options.params 인수에 설정됩니다.
매개변수
반환 값
-
모두
RouteMatchCallbackOptions
RouteMatchCallback 함수에 전달된 옵션입니다.
속성
-
이벤트
ExtendableEvent
-
요청
요청
-
sameOrigin
부울
-
URL
URL
WorkboxPlugin
가져오기 및 캐시 작업을 위한 수명 주기 콜백 속성(선택사항)이 있는 객체입니다.
속성
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
FetchDidFailCallback 선택사항
-
fetchDidSucceed
-
handlerDidComplete
-
handlerDidError
-
handlerDidRespond
-
handlerWillRespond
-
handlerWillStart
-
requestWillFetch
WorkboxPluginCallbackParam
속성
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
-
fetchDidSucceed
-
handlerDidComplete
-
handlerDidError
-
handlerDidRespond
-
handlerWillRespond
-
handlerWillStart
-
requestWillFetch
속성
cacheNames
Workbox에서 사용하는 현재 캐시 이름과 접두사/접미사를 가져옵니다.
cacheNames.precache는 미리 캐시된 애셋에 사용되고, cacheNames.googleAnalytics는 workbox-google-analytics에서 analytics.js를 저장하는 데 사용되며, cacheNames.runtime는 그 외 모든 것에 사용됩니다.
cacheNames.prefix를 사용하여 현재 접두사 값만 가져올 수 있습니다.
cacheNames.suffix를 사용하여 현재 접미사 값만 가져올 수 있습니다.
유형
객체
속성
-
googleAnalytics
문자열
-
precache
문자열
-
접두사
문자열
-
런타임
문자열
-
접미사
문자열
메서드
clientsClaim()
workbox-core.clientsClaim()
서비스 워커가 활성화되면 현재 사용 가능한 클라이언트를 소유합니다. 일반적으로 skipWaiting()와 함께 사용됩니다.
copyResponse()
workbox-core.copyResponse(
response: Response,
modifier?: function,
)
개발자가 응답을 복사하고 headers, status 또는 statusText 값 (생성자의 [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax 객체를 통해 설정할 수 있는 값)을 수정할 수 있습니다.
이러한 값을 수정하려면 함수를 두 번째 인수로 전달합니다. 이 함수는 응답 속성 {headers, status, statusText}가 있는 단일 객체로 호출됩니다. 이 함수의 반환 값은 새 Response의 ResponseInit로 사용됩니다. 값을 변경하려면 전달된 매개변수를 수정하고 반환하거나 완전히 새 객체를 반환합니다.
이 메서드는 CORS 사용 여부와 관계없이 동일 출처 응답으로 의도적으로 제한됩니다.
매개변수
-
응답
응답
-
수정자
함수 선택사항
modifier매개변수는 다음과 같습니다.(responseInit: ResponseInit) => ResponseInit
-
responseInit
ResponseInit
-
returns
ResponseInit
-
반환 값
-
Promise<Response>
registerQuotaErrorCallback()
workbox-core.registerQuotaErrorCallback(
callback: Function,
)
할당량 오류가 발생하면 실행되는 함수를 quotaErrorCallbacks 집합에 추가합니다.
매개변수
-
콜백
함수
setCacheNameDetails()
workbox-core.setCacheNameDetails(
details: PartialCacheNameDetails,
)
Workbox 패키지에서 사용하는 기본 캐시 이름을 수정합니다.
캐시 이름은 <prefix>-<Cache Name>-<suffix>로 생성됩니다.
매개변수
-
세부정보
PartialCacheNameDetails
skipWaiting()
workbox-core.skipWaiting()
이 메서드는 지원 중단되었으며 Workbox v7에서 삭제될 예정입니다.
self.skipWaiting()을(를) 호출하는 것도 동일하며 대신 이를 사용해야 합니다.