Workbox: 고급 서비스 워커 툴킷

Jeff Posnick

안정적인 웹 앱을 빌드하는 데 중요한 역할을 하는 두 가지 API는 서비스 워커와 캐시 스토리지입니다. 하지만 미묘한 버그를 도입하거나 극단적인 사례에 부딪히지 않고 효과적으로 사용하는 것은 어려울 수 있습니다. 예를 들어 서비스 워커 코드의 오류로 인해 캐싱 문제가 발생할 수 있습니다. 사용자에게 오래된 콘텐츠나 깨진 링크가 표시될 수 있습니다.

Workbox는 서비스 워커 및 Cache Storage API를 기반으로 빌드된 상위 수준의 서비스 워커 툴킷입니다. 웹 앱에 오프라인 지원을 추가하기 위한 프로덕션에 즉시 사용 가능한 라이브러리 집합을 제공합니다. 이 도구 키트는 서비스 워커 내에서 실행되는 코드를 관리하는 데 도움이 되는 도구와 빌드 프로세스와 통합되는 도구의 두 가지 컬렉션으로 구성됩니다.

런타임 코드

이는 서비스 워커 스크립트 내에서 실행되며 발신 요청을 가로채고 Cache Storage API와 상호작용하는 방식을 제어하는 코드입니다. Workbox에는 총 12개 정도의 라이브러리 모듈이 있으며, 각 모듈은 다양한 특수 사용 사례를 처리합니다. 가장 중요한 모듈은 서비스 워커가 응답할지 여부(라우팅이라고 함)와 응답 방법(캐싱 전략이라고 함)을 결정합니다.

통합 빌드

Workbox는 다음 두 가지를 수행하는 대체 방법을 제공하는 명령줄, Node.js 모듈, webpack 플러그인 도구를 제공합니다.

  • 구성 옵션 집합을 기반으로 서비스 워커 스크립트를 만듭니다. 생성된 서비스 워커는 Workbox의 런타임 라이브러리를 '내부적으로' 사용하여 구성한 캐싱 전략을 실행합니다.
  • 빌드 프로세스 중에 생성된 파일을 포함하거나 제외하는 구성 가능한 패턴을 기반으로 '미리 캐시'해야 하는 URL 목록을 생성합니다.

Workbox를 사용해야 하는 이유

서비스 워커를 빌드할 때 Workbox를 사용하는 것은 선택사항입니다. '바닐라' 서비스 워커 관점에서 일반적인 캐싱 전략을 안내하는 여러 가이드가 있습니다. Workbox를 사용하기로 결정했다면 다음과 같은 이점이 있습니다.

캐시 관리

Workbox는 사전 캐싱을 사용할 때 빌드 프로세스에 연결되거나 런타임 캐싱을 사용할 때 구성 가능한 크기/수명 정책을 통해 캐시 업데이트를 처리합니다. 기본 Cache Storage API는 강력하지만 캐시 만료에 대한 기본 제공 지원은 없습니다. Workbox와 같은 도구가 이 공백을 메웁니다.

광범위한 로깅 및 오류 보고

서비스 워커를 시작할 때 무언가가 캐시되는 이유(또는 캐시되지 않는 이유)를 파악하는 것은 어려운 일입니다. Workbox는 localhost에서 웹사이트의 개발 버전을 실행하는 시점을 자동으로 감지하고 브라우저의 JavaScript 콘솔에서 디버그 로깅을 사용 설정합니다.

DevTools 콘솔에 대한 Workbox 로깅

로그 메시지를 따라가면 혼자서 진행하는 것보다 훨씬 더 빠르게 구성 또는 무효화 문제의 근본 원인을 파악할 수 있습니다.

테스트를 거친 크로스 브라우저 코드베이스

Workbox는 크로스 브라우저 테스트 모음을 기반으로 개발되며, 가능한 경우 특정 브라우저에서 누락된 기능의 대체 구현으로 자동 대체됩니다.

Workbox를 어떻게 사용해야 하나요?

프레임워크 통합

처음부터 새 프로젝트를 시작하는 경우 많이 사용되는 여러 시작 키트 및 부가기능 플러그인에 있는 Workbox 통합을 활용할 수 있습니다.

기존 빌드 프로세스에 Workbox 추가

사이트에 이미 빌드 프로세스가 있는 경우 적절한 명령줄, Node.js 모듈 또는 webpack 플러그인 도구를 추가하는 것만으로 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',
  })
);