플러그인 사용

Workbox를 사용할 때는 요청과 응답이 가져오거나 캐시될 때 이를 조작하는 것이 좋습니다. Workbox 플러그인을 사용하면 최소한의 추가 상용구로 서비스 워커에 동작을 추가할 수 있습니다. 이러한 도구는 패키징하여 자체 프로젝트에 재사용하거나 다른 사람들이 사용하도록 공개적으로 출시할 수 있습니다.

Workbox는 즉시 사용할 수 있는 여러 플러그인을 제공하며, 기술이 있는 경우 애플리케이션 요구사항에 맞게 맞춤 플러그인을 작성할 수 있습니다.

사용 가능한 Workbox 플러그인

Workbox는 서비스 워커에 사용할 수 있는 다음과 같은 공식 플러그인을 제공합니다.

• BackgroundSyncPlugin: 네트워크 요청이 실패하면 이 플러그인을 사용하여 백그라운드 동기화 대기열에 추가하여 다음 동기화 이벤트가 트리거될 때 다시 요청할 수 있습니다.
• BroadcastUpdatePlugin: 캐시가 업데이트될 때마다 브로드캐스트 채널에서 또는 postMessage()를 통해 메시지를 전달할 수 있습니다.
• CacheableResponsePlugin: 특정 기준을 충족하는 요청만 캐시합니다.
• ExpirationPlugin: 캐시의 항목 수와 최대 기간을 관리합니다.
• RangeRequestsPlugin: Range HTTP 요청 헤더가 포함된 요청에 응답합니다.

Workbox 플러그인은 위에 나열된 플러그인 중 하나든 맞춤 플러그인이든 플러그인 인스턴스를 전략의 plugins 속성에 추가하여 Workbox 전략과 함께 사용됩니다.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30