작업 상자 창 사용

이 문서에서 아직 많이 다루지 않은 Workbox 모듈은 window에서 실행되도록 설계된 모듈 모음인 workbox-window입니다. 이 모듈의 목표는 다음과 같습니다.

  • 개발자가 서비스 워커 수명 주기의 중요한 순간을 식별하도록 지원하여 서비스 워커 등록 및 업데이트를 간소화하여 이러한 순간에 더 쉽게 대응할 수 있도록 지원
  • 개발자가 잘못된 범위에 서비스 워커를 등록하는 등 흔히 발생하는 실수를 방지하기 위해
  • window와 서비스 워커 범위 간의 메시징을 간소화하기 위해

workbox-window 가져오기 및 사용

workbox-window에서 가장 자주 사용하는 내보내기는 노드 또는 웹페이지의 CDN에서 가져올 수 있는 Workbox 클래스입니다.

로컬 번들 만들기

도구 모음에 webpack이나 Rollup과 같은 번들러가 포함된 경우 workbox-window를 로컬에서 번들로 묶을 수 있습니다.

먼저 애플리케이션의 프로덕션 종속 항목으로 workbox-window를 설치합니다.

npm install workbox-window --save

그런 다음 애플리케이션 JavaScript에서 workbox-window의 Workbox 클래스를 import할 수 있습니다.

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

workbox-window은 상당히 작지만 동적 import을 사용하여 웹사이트의 핵심 애플리케이션 로직에서 분할할 수도 있습니다. 이렇게 하면 페이지의 기본 번들 크기를 줄일 수 있습니다.

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

CDN 사용

권장되는 방법은 아니지만 workbox-window를 사용하는 더 쉬운 방법은 CDN에서 가져오는 것입니다.

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

위의 예에서 <script> 요소는 type="module" 속성을 사용합니다. 이는 브라우저에서 빌드 단계 없이 정적 import 문을 사용하려는 경우에 필요합니다. 서비스 워커를 지원하는 모든 주요 브라우저도 JavaScript 모듈을 지원하므로 이전 브라우저는 type 속성 값이 "module"인 <script> 요소를 무시하므로 이 코드를 모든 브라우저에 사용해도 됩니다.

서비스 워커 등록

다음과 같이 Workbox 클래스의 register 메서드를 사용하면 서비스 워커를 workbox-window에 등록할 수 있습니다.

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

이는 navigator.serviceWorker.register를 사용하여 서비스 워커를 직접 등록하는 것과 동일한 것처럼 보일 수 있습니다. 그러나 Workbox.register는 서비스 워커를 등록하기 전에 window load 이벤트까지 대기합니다. 이는 페이지 시작을 지연시킬 수 있는 대역폭 경합을 방지할 수 있도록 사전 캐싱이 포함된 상황에서 바람직합니다.

window와 서비스 워커 범위 간의 통신

서비스 워커는 window와 별개로 자체 범위가 있으며 window에서 사용 가능한 API의 하위 집합에만 액세스할 수 있습니다. 그러나 window와 서비스 워커 간에는 통신할 수 있습니다. workbox-window를 사용하면 workbox-window 모듈의 messageSW 메서드를 사용하여 두 범위 간에 더 쉽게 통신할 수 있습니다.

Workbox는 메시지에 특정 형식을 사용하는 객체는 다음과 같은 속성을 가집니다.

  • type는 메시지를 식별하는 필수 고유 문자열입니다. 형식은 대문자를 사용하고 밑줄로 단어를 구분해야 합니다 (예: CACHE_URLS).
  • meta는 메시지를 전송하는 Workbox 패키지의 이름을 나타내는 선택적 문자열이며 일반적으로 생략됩니다.
  • payload는 전송할 데이터를 나타내는 선택적 매개변수입니다. 모든 데이터 유형이 될 수 있습니다.

다음은 messageSW의 작동 방식을 보여주는 예입니다. 먼저 서비스 워커의 코드를 시작합니다.

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

그런 다음 웹페이지에 다음 코드를 삽입하세요.

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

서비스 워커 업데이트를 사용할 수 있을 때 사용자에게 알리는 방법과 같이 서비스 워커와 window 간의 통신이 유용한 경우가 많습니다. 이 레시피는 messageSkipWaiting라는 self.skipWaiting의 특수 도우미 메서드를 사용하여 type 값이 SKIP_WAITING인 메시지를 전송합니다.