Workbox

PWA가 늘어남에 따라 서비스 워커와 캐시 스토리지 로직을 유지관리하기가 어려울 수 있습니다. Workbox는 이러한 작업에 도움이 되는 오픈소스 라이브러리 모음입니다. Workbox는 Service Worker API 및 Cache Storage API와 같은 하위 수준 API를 캡슐화하고 개발자 친화적인 인터페이스를 노출합니다.

캐시 전략을 경로 (또는 라우팅 패턴)에 일치시키기, 스트림 작업하기, 적절한 대체를 사용하는 백그라운드 동기화 등의 기능 사용과 같은 작업에 도움이 될 수 있습니다.

Workbox는 애셋 캐싱 및 게재 요구사항을 관리하는 데 도움을 줍니다. 또한 모바일 사이트의 54%에서 사용되는 서비스 워커에 가장 많이 사용되는 라이브러리이며 Angular CLI, Create-React-App, Vue CLI를 비롯한 다양한 빌드 도구와 CLI에서 사용됩니다. Next.js와 같은 대부분의 다른 라이브러리 및 프레임워크에도 플러그인이 있습니다.

54%%

서비스 워커가 있는 모바일 사이트는 Workbox 라이브러리를 사용합니다.

작업 상자 모듈

Workbox에는 내부적으로 모듈이라고 부르는 여러 라이브러리가 포함되어 있으며, 각 라이브러리는 애셋 및 서비스 워커 동작 관리의 다양한 측면에 중점을 둡니다.

작업 상자 모듈은 다음과 같이 다양한 컨텍스트에서 작동합니다.

  • 서비스 워커 컨텍스트 내: 필요한 모듈을 가져와서 서비스 워커 파일에서 사용합니다. 예를 들어 캐싱을 관리하고 다양한 전략으로 파일을 제공하는 데 도움이 됩니다.
  • 기본 window 컨텍스트 내: 서비스 워커 등록을 지원하고 서비스 워커와 통신하는 것을 지원합니다.
  • 빌드 시스템의 일부로: 애셋의 매니페스트를 생성하거나 전체 서비스 워커를 생성하는 등의 용도로 webpack을 사용합니다.

많이 사용되는 모듈은 다음과 같습니다.

  • workbox-Routing: 서비스 워커가 요청을 가로채면 이 모듈은 응답을 제공하는 다른 함수로 요청을 라우팅합니다. 이는 제공 챕터에서 언급한 fetch 이벤트 핸들러의 구현입니다.
  • workbox-strategies: 요청에 대한 응답을 처리하는 일련의 런타임 캐싱 전략입니다(예: 재검증 시 캐시 우선 및 비활성). 제공 챕터에서 언급된 다양한 전략을 구현한 것입니다.
  • workbox-precaching: 캐싱 챕터에서 언급한 바와 같이 서비스 워커의 install 이벤트 핸들러 (사전 캐싱이라고도 함)에서 파일을 캐싱하는 구현입니다. 이 모듈을 사용하면 파일 세트를 손쉽게 사전 캐시하고 해당 자산에 대한 업데이트를 효율적으로 관리할 수 있습니다. 애셋 업데이트에 대해서는 업데이트 챕터에서 다룹니다.
  • workbox-expiration: 캐시에 있는 항목 수 또는 캐시된 요청의 기간을 기준으로 캐시된 요청을 삭제하기 위해 캐싱 전략과 함께 사용되는 플러그인입니다. 또한 캐시를 관리하고 각 캐시의 항목 수 및 시간 제한을 설정하는 데 도움이 됩니다.
  • workbox-window: 창 컨텍스트, 즉 PWA 웹페이지 내에서 실행할 일련의 모듈입니다. 서비스 워커 등록 및 업데이트 프로세스를 간소화하고 서비스 워커 컨텍스트에서 실행되는 코드와 창 컨텍스트 간에 더 쉽게 통신할 수 있습니다.

Workbox 사용

Workbox는 PWA에 통합하는 다양한 방법을 제공합니다. 앱의 아키텍처에 가장 적합한 것을 선택할 수 있습니다.

  • Workbox CLI: 완전한 서비스 워커를 생성하거나, 사전 캐시 매니페스트를 삽입하거나, 필요한 Workbox 파일을 복사하는 명령줄 유틸리티입니다.
  • Workbox 빌드: 전체 서비스 워커를 생성하고, 사전 캐시 매니페스트를 삽입하고, Workbox 파일을 복사하는 npm 모듈입니다. 이는 자체 빌드 프로세스와 통합하기 위한 것입니다.
  • workbox-sw: 빌드 프로세스를 사용하지 않는 CDN에서 Workbox 서비스 워커 패키지를 로드하는 방법입니다.

Workbox CLI는 서비스 워커를 만드는 과정을 단계별로 안내하는 마법사를 제공합니다. 마법사를 실행하려면 명령줄에 다음을 입력합니다.

npx workbox-cli wizard

터미널에서 작동하는 Workbox CLI

Workbox를 사용한 캐싱 및 제공

Workbox의 일반적인 용도는 라우팅 및 전략 모듈을 함께 사용하여 파일을 캐시하고 제공하는 것입니다.

workbox-strategies 모듈은 애셋 및 데이터게재 장에서 설명한 캐싱 전략을 즉시 제공합니다.

workbox-Routing 모듈은 서비스 워커로 들어오는 요청을 정렬하고 이를 캐싱 전략 또는 기능과 일치시켜 해당 요청에 대한 응답을 받는 데 도움을 줍니다.

경로와 전략을 일치시킨 후 Workbox는 workbox-cacheable-response 플러그인을 사용하여 캐시에 추가할 응답을 필터링하는 기능도 제공합니다. 예를 들어 이 플러그인을 사용하면 오류 없이 반환된 응답만 캐시할 수 있습니다.

다음 코드 샘플은 CacheFirst 모듈을 통해 캐시 우선 전략을 사용하여 페이지 탐색을 캐시하고 제공합니다.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

플러그인을 사용하면 Workbox의 캐싱 및 요청 해결 수명 주기를 활용할 수 있습니다. 여기서 CacheableResponsePlugin는 200 상태가 되는 요청을 캐시하는 데만 사용되어 잘못된 요청이 캐시에 저장되지 않도록 합니다.

전략이 만들어졌으면 사용할 경로를 등록할 차례입니다. 다음 예에서는 registerRoute()를 호출하여 요청 객체를 콜백에 전달합니다. request.mode"navigate"이면 이전 코드 예에서 정의된 CacheFirst 전략 (여기서는 pageStrategy)을 사용합니다.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

추가 예시와 권장사항은 작업 상자 문서를 참고하세요.

오프라인 대체

workbox-route 모듈에는 경로에서 오류가 발생할 경우 처리를 제공하는 내보낸 setCatchHandler()도 있습니다. 이를 통해 오프라인 대체를 설정하여 요청된 경로를 현재 사용할 수 없음을 사용자에게 알릴 수 있습니다.

Workbox와 Cache Storage API의 조합은 캐시 전용 전략을 사용하여 오프라인 대체를 제공합니다. 첫째, 서비스 워커의 설치 수명 주기 동안 offline-fallbacks 캐시가 열리고 오프라인 대체 배열이 캐시에 추가됩니다.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

그런 다음 setCatchHandler()에서 오류가 발생한 요청의 대상이 결정되고 offline-fallbacks 캐시가 열립니다. 대상이 문서인 경우 오프라인 대체 콘텐츠의 내용이 사용자에게 반환됩니다. 존재하지 않거나 대상이 이미지 또는 스타일시트 등의 문서 (예: 이미지 또는 스타일시트)가 아닌 경우 오류 응답이 반환됩니다. 문서뿐만 아니라 이미지, 동영상, 글꼴 등 오프라인 대체로 제공하려는 모든 항목에 대해 이 패턴을 확장할 수 있습니다.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Recipes

NetworkFirst 탐색 및 오프라인 대체와 같은 여러 라우팅 및 캐싱 패턴은 재사용 가능한 레시피로 캡슐화할 수 있을 만큼 일반적입니다. 아키텍처에 적합한 솔루션을 제공하는 경우 도움이 될 수 있으므로 workbox-recipes를 선택합니다. 대개 서비스 워커의 코드에 추가해야 하는 코드 한 줄로 제공됩니다.

애셋 캐싱 및 업데이트

애셋 캐싱에는 업데이트도 포함됩니다. Workbox는 가장 효과적인 방법으로 저작물을 업데이트할 수 있도록 도와줍니다. 서버에서 변경사항이 있을 경우 계속 업데이트하거나 앱의 새 버전이 출시될 때까지 기다릴 수 있습니다. 업데이트에 관한 자세한 내용은 업데이트 챕터를 참고하세요.

Workbox로 놀기

다음 Codelab을 사용하여 Workbox를 바로 사용해 볼 수 있습니다.

자료