서비스 워커와 캐시 스토리지라는 두 가지 API는 안정적인 웹 앱을 빌드하는 데 중요한 역할을 합니다. 하지만 미묘한 버그가 발생하거나 극단적인 사례에 부딪히지 않고 효과적으로 사용하기란 어려울 수 있습니다. 예를 들어 서비스 워커 코드의 오류로 인해 캐싱 문제가 발생할 수 있습니다. 사용자에게 오래된 콘텐츠가 표시되거나 링크가 깨질 수 있습니다.
Workbox는 서비스 워커 및 캐시 저장소 API를 기반으로 빌드된 높은 수준의 서비스 워커 툴킷입니다. 웹 앱에 오프라인 지원을 추가할 수 있도록 프로덕션에 즉시 사용 가능한 라이브러리 모음을 제공합니다. 도구 키트는 서비스 워커 내에서 실행되는 코드를 관리하는 데 도움이 되는 도구와 빌드 프로세스와 통합되는 도구의 두 가지 컬렉션으로 구성됩니다.
런타임 코드
이 코드는 서비스 워커 스크립트 내에서 실행되며 나가는 요청을 가로채고 Cache Storage API와 상호작용하는 방법을 제어합니다. Workbox에는 총 10여 개의 라이브러리 모듈이 있으며, 각 모듈은 다양한 특수 사용 사례를 처리합니다. 가장 중요한 모듈은 서비스 워커의 응답 여부 (라우팅이라고 함)와 서비스 워커의 응답 방법 (캐싱 전략이라고 함)을 결정합니다.
빌드 통합
Workbox는 다음 두 가지 작업을 실행하는 대체 방법을 제공하는 명령줄, Node.js 모듈, webpack 플러그인 도구를 제공합니다.
- 구성 옵션 집합을 기반으로 서비스 워커 스크립트를 만듭니다. 생성된 서비스 워커는 Workbox의 런타임 라이브러리를 '내부적으로' 사용하여 사용자가 구성한 캐싱 전략을 실행합니다.
- 구성 가능한 패턴에 기반하여 '사전 캐시'되어야 하는 URL 목록을 생성하여 빌드 프로세스 중에 생성된 파일을 포함하거나 제외합니다.
Workbox를 사용해야 하는 이유는 무엇인가요?
서비스 워커를 빌드할 때 Workbox를 사용하는 것은 선택사항입니다. '일반적인' 서비스 워커 관점에서 일반적인 캐싱 전략을 안내하는 다양한 가이드가 있습니다. Workbox를 사용하기로 결정했다면 다음과 같은 이점이 있습니다.
캐시 관리
Workbox는 사전 캐싱을 사용하는 경우 빌드 프로세스에 연결되어 있거나 런타임 캐싱을 사용할 때 구성 가능한 크기/연령 정책을 통해 캐시 업데이트를 처리합니다. 기본 Cache Storage API는 강력하지만 캐시 만료를 기본적으로 지원하지는 않습니다. Workbox와 같은 도구가 이 공백을 메웁니다.
광범위한 로깅 및 오류 보고
서비스 워커를 시작할 때 무언가가 캐시되는 이유 (또는 마찬가지로 캐시되지 않는 이유)를 파악하는 것은 어렵습니다.
Workbox는 개발자가 localhost에서 개발 버전의 웹사이트를 실행할 때 이를 자동으로 감지하고 브라우저의 JavaScript 콘솔에서 디버그 로깅을 사용 설정합니다.
로그 메시지를 따르면 혼자 진행할 때보다 훨씬 빠르게 모든 구성 또는 무효화 문제의 루트에 도달할 수 있습니다.
테스트를 거친 브라우저 간 코드베이스
Workbox는 교차 브라우저 테스트 모음을 기반으로 개발되며 가능한 경우 특정 브라우저에서 누락된 기능의 대체 구현으로 자동으로 대체됩니다.
workbox-broadcast-cache-update module는 가능한 경우 Broadcast Channel API를 사용하고 지원되지 않는 브라우저에서는postMessage()기반 구현으로 대체합니다.- workbox-background-sync 모듈은 가능한 경우 Background Sync API를 사용하며, 사용할 수 없는 경우 서비스 워커가 시작될 때마다 큐에 추가된 이벤트를 다시 시도합니다.
Workbox를 어떻게 사용해야 하나요?
프레임워크 통합
처음부터 새 프로젝트를 시작하는 경우 다음과 같은 여러 인기 스타터 키트와 부가기능 플러그인에 있는 Workbox 통합을 활용할 수 있습니다.
기존 빌드 프로세스에 Workbox 추가
사이트의 빌드 프로세스가 이미 있는 경우 적절한 명령줄, Node.js 모듈, 웹팩 플러그인 도구만 입력하면 Workbox를 사용할 수 있습니다.
특히 Workbox 명령줄 인터페이스를 사용하면 로컬 개발 환경을 확인하고 앞으로 사용할 수 있는 합리적인 기본 구성을 제안하는 wizard 모드를 통해 쉽게 시작하고 실행할 수 있습니다.
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
서비스 워커를 빌드하려면 빌드 프로세스의 일부로 workbox generateSW workbox-config.js를 실행합니다. 자세한 내용은 generateSW 문서를 참고하세요.
workbox-config.js를 변경하여 서비스 워커를 추가로 맞춤설정할 수 있습니다.
자세한 내용은 옵션 문서를 참고하세요.
기존 서비스 워커에서 런타임에 Workbox 사용
기존 서비스 워커가 있고 Workbox의 런타임 라이브러리를 사용해 보려면 공식 CDN에서 Workbox를 가져와서 런타임 캐싱에 바로 사용할 수 있습니다. 이 사용 사례에서는 사전 캐싱 (빌드 시간 통합 필요)을 활용할 수 없지만, 다양한 캐싱 전략을 즉시 프로토타입으로 제작하고 시도하는 데 유용합니다.
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);