작업 상자 만료

캐시에 항목을 저장할 수 있는 기간이나 캐시에 보관해야 하는 항목의 수에 따라 캐시에 제한을 두는 것이 일반적입니다. Workbox는 캐시의 항목 수를 제한하거나 장기간 캐시된 항목을 삭제할 수 있는 workbox-expiration 플러그인을 통해 이 기능을 제공합니다.

캐시 항목 수 제한

캐시에 저장되는 항목 수를 제한하려면 다음과 같이 maxEntries 옵션을 사용하면 됩니다.

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
      }),
    ],
  })
);

이렇게 하면 플러그인이 이 경로에 추가됩니다. 캐시된 응답이 사용되거나 새 요청이 캐시에 추가된 후 플러그인은 구성된 캐시를 확인하여 캐시된 항목의 수가 한도를 초과하지 않도록 합니다. 이러한 경우 가장 오래된 항목이 삭제됩니다.

캐시된 항목의 기간 제한

요청이 캐시되는 기간을 제한하려면 다음과 같이 maxAgeSeconds 옵션을 사용하여 최대 수명을 초 단위로 정의하면 됩니다.

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 24 * 60 * 60,
      }),
    ],
  })
);

플러그인은 각 요청 또는 캐시 업데이트 후 항목을 확인하고 삭제합니다.

고급 사용법

다른 Workbox 모듈과 별도로 만료 로직을 사용하려면 CacheExpiration 클래스를 사용하면 됩니다.

캐시에 제한사항을 적용하려면 다음과 같이 제어하려는 캐시에 관한 CacheExpiration 인스턴스를 만듭니다.

import {CacheExpiration} from 'workbox-expiration';

const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
  maxAgeSeconds: 24 * 60 * 60,
  maxEntries: 20,
});

캐시된 항목을 업데이트할 때마다 updateTimestamp() 메서드를 호출하여 저장 기간이 업데이트되도록 해야 합니다.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

그런 다음 항목 집합을 만료시킬 때마다 maxAgeSeconds 및 maxEntries 구성을 적용하는 expireEntries() 메서드를 호출할 수 있습니다.

await expirationManager.expireEntries();