workbox-sw
모듈은 Workbox 모듈을 매우 쉽게 준비하고 실행할 수 있는 방법을 제공하고, Workbox 모듈의 로드를 단순화하며, 몇 가지 간단한 도우미 메서드를 제공합니다.
CDN을 통해 workbox-sw
를 사용하거나 자체 서버의 작업 상자 파일 세트와 함께 사용할 수 있습니다.
CDN을 통한 Workbox SW 사용
이 모듈을 사용하는 가장 쉬운 방법은 CDN을 사용하는 것입니다. 서비스 워커에 다음을 추가하기만 하면 됩니다.
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
이렇게 하면 서비스 워커에 모든 Workbox 모듈에 대한 액세스를 제공하는 workbox
네임스페이스가 생성됩니다.
workbox.precaching.*
workbox.routing.*
etc
추가 모듈을 사용하기 시작하면 마법 같은 일이 일어납니다.
모듈을 처음으로 참조하면 workbox-sw
에서 이를 감지하여 모듈을 제공하기 전에 로드합니다. DevTools의 네트워크 탭에서
확인할 수 있습니다
이러한 파일은 나중에 오프라인에서 사용할 수 있도록 브라우저에 캐시됩니다.
CDN 대신 로컬 작업 상자 파일 사용
CDN을 사용하지 않으려면 자체 도메인에서 호스팅되는 Workbox 파일로 쉽게 전환할 수 있습니다.
가장 간단한 방법은 workbox-cli
의 copyLibraries
명령어를 통해 파일을 가져온 다음 modulePathPrefix
구성 옵션을 통해 이러한 파일을 찾을 위치를 workbox-sw
에 알리는 것입니다.
파일을 /third_party/workbox-vX.Y.Z/
아래에 두면 다음과 같이 사용할 수 있습니다.
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
비동기 가져오기 피하기
내부적으로 새 모듈을 처음 로드하려면 상응하는 JavaScript 파일 경로 (CDN에서 호스팅되거나 로컬 URL을 통해 호스팅)로 importScripts()
를 호출해야 합니다.
두 경우 모두 중요한 제한사항이 적용됩니다. importScripts()
에 대한 암시적 호출은 서비스 워커의 install
핸들러 내부에서 또는 서비스 워커 스크립트의 동기식 초기 실행 중에만 발생할 수 있습니다.
이러한 제한사항을 위반하지 않으려면 이벤트 핸들러 또는 비동기 함수 외부에서 다양한 workbox.*
네임스페이스를 참조하는 것이 좋습니다.
예를 들어, 다음과 같은 최상위 서비스 워커 코드는 괜찮습니다.
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will work!
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);
그러나 서비스 워커의 다른 위치에서 workbox.strategies
를 참조하지 않은 경우 아래 코드가 문제가 될 수 있습니다.
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
// outside of the initial, synchronous service worker execution.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
이 제한을 위반하는 코드를 작성해야 한다면 workbox.loadModule()
메서드를 사용하여 이벤트 핸들러 외부에서 importScripts()
호출을 명시적으로 트리거할 수 있습니다.
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Referencing workbox.strategies will now work as expected.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
또는 이벤트 핸들러 외부의 관련 네임스페이스에 대한 참조를 만든 다음 이 참조를 나중에 사용할 수 있습니다.
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Using the previously-initialized strategies will work as expected.
const cacheFirst = new strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
디버그 또는 프로덕션 빌드 강제 사용
모든 Workbox 모듈은 두 가지 빌드로 제공됩니다. 하나는 로깅 및 추가 유형 확인을 포함하는 디버그 빌드이고 다른 하나는 로깅 및 유형 확인을 삭제하는 프로덕션 빌드입니다.
기본적으로 workbox-sw
는 localhost의 사이트에 대해 디버그 빌드를 사용하지만 다른 모든 출처에는 프로덕션 빌드를 사용합니다.
디버그 빌드 또는 프로덕션 빌드를 강제하려면 debug
구성 옵션을 설정하면 됩니다.
workbox.setConfig({
debug: true,
});
workbox-sw
사용을 위해 import 문을 사용하여 코드 변환
workbox-sw
를 사용하여 Workbox를 로드할 때 모든 Workbox 패키지는 전역 workbox.*
네임스페이스를 통해 액세스됩니다.
import
문을 사용하는 코드 샘플에서 workbox-sw
를 사용하도록 변환하려면 workbox-sw
를 로드하고 모든 import
문을 전역 네임스페이스에서 이러한 모듈을 참조하는 로컬 변수로 바꾸기만 하면 됩니다.
npm에 게시된 모든 Workbox 서비스 워커 패키지는 camelCase 버전의 이름을 통해 전역 workbox
네임스페이스에서도 사용할 수 있기 때문입니다. 예를 들어 workbox-precaching
npm 패키지에서 내보낸 모든 모듈은 workbox.precaching.*
에서 찾을 수 있습니다. workbox-background-sync
npm 패키지에서 내보낸 모든 모듈은 workbox.backgroundSync.*
에서 확인할 수 있습니다.
예를 들어 Workbox 모듈을 참조하는 import
문을 사용하는 코드는 다음과 같습니다.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);
다음은 동일한 코드를 workbox-sw
를 사용하도록 재작성한 것입니다 (import 문만 변경되었으며 로직은 변경되지 않았습니다).
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);