이 문서에서 아직 다루지 않은 Workbox 모듈 중 하나는 workbox-window
로, window
에서 실행되도록 고안된 모듈 집합입니다. 이 모듈의 목표는 다음과 같습니다.
- 개발자가 서비스 워커 수명 주기의 중요한 순간을 파악하여 해당 순간에 더 쉽게 대응할 수 있도록 서비스 워커 등록 및 업데이트를 간소화합니다.
- 개발자가 잘못된 범위에 서비스 워커를 등록하는 등의 일반적인 실수를 하지 않도록 하기 위함입니다.
window
와 서비스 워커 범위 간의 메시지를 간소화합니다.
workbox-window
가져오기 및 사용
workbox-window
에서 가장 자주 사용하는 내보내기는 Workbox
클래스이며, 이 클래스는 Node에서 가져오거나 웹페이지의 CDN에서 가져올 수 있습니다.
로컬 번들 만들기
도구 모음에 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-window
에 서비스 워커를 등록하는 작업은 다음과 같이 Workbox
클래스의 register
메서드를 사용하여 실행됩니다.
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
인 메시지를 전송합니다.