작업 상자-Sw

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의 네트워크 탭에서 확인할 수 있습니다

DevTools에서 작업 상자 라이브러리 로드

이러한 파일은 나중에 오프라인에서 사용할 수 있도록 브라우저에 캐시됩니다.

CDN 대신 로컬 작업 상자 파일 사용

CDN을 사용하지 않으려면 자체 도메인에서 호스팅되는 Workbox 파일로 쉽게 전환할 수 있습니다.

가장 간단한 방법은 workbox-clicopyLibraries 명령어를 통해 파일을 가져온 다음 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]})],
  })
);