Workbox: 고급 서비스 워커 도구 키트

Jeff Posnick

다음 두 가지 API는 안정적인 웹 앱을 빌드하는 데 중요한 역할을 합니다. 서비스 워커 및 Cache Storage를 참조하세요. 하지만 미묘한 버그를 불러오거나 에지에 부딪히지 않고 효과적으로 사용하면 됩니다. 어려운 과제가 될 수 있습니다 예를 들어, 서비스 워커 코드의 오류는 캐싱 문제를 일으키는 행위 사용자에게 오래된 콘텐츠가 표시되거나 링크를 클릭합니다.

Workbox는 서비스 워커와 캐시 스토리지를 기반으로 구축된 서비스 워커 툴킷 API에 액세스할 수 있습니다 오프라인 지원을 추가할 수 있도록 프로덕션에 즉시 사용 가능한 라이브러리 집합을 제공합니다. 있습니다. 툴킷은 두 가지 컬렉션, 즉 광고 소재를 관리하고 컨테이너화된 애플리케이션, 그리고 서비스 워커 내부에서 실행되는 빌드할 수 있습니다

런타임 코드

이 코드는 서비스 워커 스크립트 내에서 실행되고 나가는 요청을 가로채고 Cache Storage API와 상호작용합니다. Workbox에는 총 십여 개 라이브러리 모듈 각각 다양하고 특수한 사용 사례를 처리합니다. 가장 중요한 모듈 서비스 워커가 응답할 지 여부( route), 및 어떻게 응답하는지( 캐싱 전략).

통합 빌드

Workbox 혜택 명령줄 Node.js 모듈, 및 webpack 플러그인 두 가지 작업을 수행할 수 있는 다른 방법을 제공하는 도구

  • 구성 집합을 기반으로 서비스 워커 스크립트 만들기 있습니다. 생성된 서비스 워커는 Workbox의 런타임 라이브러리를 사용합니다. '고급설정' 구성하는 캐싱 전략을 실행할 수 있습니다
  • 광고에 표시해야 하는 URL 목록 생성 'precached', 구성 가능한 패턴에 따라 생성된 파일을 포함 및 제외 어떻게 해야 할까요?

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',
  })
);