작업 상자 만료

항목을 캐시에 저장할 수 있는 기간 또는 캐시에 보관할 항목의 수를 기준으로 캐시에 제한을 적용하는 것이 일반적입니다. 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);

그런 다음 항목 집합의 만료를 원할 때마다 expireEntries() 메서드를 호출하면 maxAgeSeconds 및 maxEntries 구성이 적용됩니다.

await expirationManager.expireEntries();

유형

CacheExpiration

CacheExpiration 클래스를 사용하면 Cache에 저장된 응답의 만료일 또는 수에 제한을 정의할 수 있습니다.

속성

  • 생성자

    void

    새 CacheExpiration 인스턴스를 생성하려면 config 속성 중 하나 이상을 제공해야 합니다.

    constructor 함수는 다음과 같습니다. 

    (cacheName: string, config?: CacheExpirationConfig) => {...}

    • cacheName

      문자열

      제한사항을 적용할 캐시의 이름입니다.

    • config

      CacheExpirationConfig 선택사항

  • delete

    void

    캐시 만료 메타데이터를 추적하는 데 사용되는 IndexedDB 객체 저장소를 삭제합니다.

    delete 함수는 다음과 같습니다. 

    () => {...}

    • returns

      Promise<void>

  • expireEntries

    void

    지정된 캐시 및 지정된 기준의 항목을 만료합니다.

    expireEntries 함수는 다음과 같습니다. 

    () => {...}

    • returns

      Promise<void>

  • isURLExpired

    void

    URL을 사용하기 전에 만료되었는지 확인하는 데 사용할 수 있습니다.

    이렇게 하려면 IndexedDB에서 조회해야 하므로 느릴 수 있습니다.

    참고: 이 메서드는 캐시된 항목을 삭제하지 않습니다. expireEntries()를 호출하여 indexedDB 및 Cache 항목을 삭제하세요.

    isURLExpired 함수는 다음과 같습니다. 

    (url: string) => {...}

    • URL

      문자열

    • returns

      Promise<boolean>

  • updateTimestamp

    void

    지정된 URL의 타임스탬프를 업데이트합니다. 이렇게 하면 최대 항목을 기준으로 항목을 삭제할 때 가장 최근에 사용된 항목이 정확하거나 만료될 때 타임스탬프가 최신 상태가 됩니다.

    updateTimestamp 함수는 다음과 같습니다. 

    (url: string) => {...}

    • URL

      문자열

    • returns

      Promise<void>

ExpirationPlugin

이 플러그인은 workbox-strategy에서 캐시된 요청의 기간 또는 수에 대한 제한을 정기적으로 적용하는 데 사용할 수 있습니다.

맞춤 cacheName 속성이 설정된 workbox-strategy 인스턴스에서만 사용할 수 있습니다. 즉, 기본 런타임 캐시 이름을 사용하는 전략의 항목을 만료하는 데 사용할 수 없습니다.

캐시된 응답이 사용되거나 업데이트될 때마다 이 플러그인은 연결된 캐시를 확인하고 오래된 응답이나 추가 응답을 삭제합니다.

maxAgeSeconds를 사용하면 캐시된 응답이 사용된 후에 만료 정리가 실행되므로 만료 후 응답이 한 번 사용될 수 있습니다. 응답에 '날짜' 헤더가 있는 경우 경량 만료 확인이 실행되고 응답이 즉시 사용되지 않습니다.

maxEntries를 사용하면 가장 최근에 요청되지 않은 항목이 먼저 캐시에서 삭제됩니다.

속성

  • 생성자

    void

    constructor 함수는 다음과 같습니다. 

    (config?: ExpirationPluginOptions) => {...}

  • deleteCacheAndMetadata

    void

    다음 두 가지 작업을 실행하는 도우미 메서드입니다.

    • 대신 caches.delete()를 호출하여 이 플러그인 인스턴스와 연결된 기본 캐시 인스턴스를 모두 삭제합니다.
    • 각 캐시 인스턴스의 만료 세부정보를 추적하는 데 사용되는 IndexedDB의 메타데이터를 삭제합니다.

    캐시 만료를 사용하는 경우 이 메서드를 호출하는 것이 caches.delete()를 직접 호출하는 것보다 좋습니다. 이렇게 하면 IndexedDB 메타데이터도 완전히 삭제되고 열려 있는 IndexedDB 인스턴스가 삭제되기 때문입니다.

    특정 캐시에서 캐시 만료를 사용하지 않는 경우 caches.delete()를 호출하고 캐시 이름을 전달하면 됩니다. 이 경우 삭제에 필요한 Workbox별 메서드는 없습니다.

    deleteCacheAndMetadata 함수는 다음과 같습니다. 

    () => {...}

    • returns

      Promise<void>

ExpirationPluginOptions

속성

  • matchOptions

    CacheQueryOptions 선택사항

  • maxAgeSeconds

    번호 선택사항

  • maxEntries

    번호 선택사항

  • purgeOnQuotaError

    불리언 선택사항