캐시에 항목을 저장할 수 있는 기간이나 캐시에 보관해야 하는 항목의 수에 따라 캐시에 제한을 두는 것이 일반적입니다. 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();
유형
CacheExpiration
CacheExpiration 클래스를 사용하면 Cache에 저장되는 응답 수의 만료 또는 제한을 정의할 수 있습니다.
속성
-
생성자
void
새 CacheExpiration 인스턴스를 생성하려면
config속성 중 하나 이상을 제공해야 합니다.constructor함수는 다음과 같습니다.(cacheName: string,config?: CacheExpirationConfig)=> {...}-
cacheName
string
제한을 적용할 캐시의 이름입니다.
-
config
CacheExpirationConfig 선택사항
-
returns
-
-
delete
void
캐시 만료 메타데이터를 추적하는 데 사용되는 IndexedDB 객체 저장소를 삭제합니다.
delete함수는 다음과 같습니다.()=> {...}-
returns
Promise<void>
-
-
expireEntries
void
지정된 캐시 및 지정된 기준에 대한 항목을 만료됩니다.
expireEntries함수는 다음과 같습니다.()=> {...}-
returns
Promise<void>
-
-
isURLExpired
void
URL이 사용되기 전에 만료되었는지 여부를 확인하는 데 사용할 수 있습니다.
IndexedDB에서 조회해야 하므로 속도가 느릴 수 있습니다.
참고: 이 메서드는 캐시된 항목을 삭제하지 않으므로
expireEntries()를 호출하여 indexDB와 캐시 항목을 삭제하세요.isURLExpired함수는 다음과 같습니다.(url: string)=> {...}-
url
string
-
returns
Promise<boolean>
-
-
updateTimestamp
void
지정된 URL의 타임스탬프를 업데이트합니다. 이렇게 하면 최대 항목을 기준으로 항목을 삭제할 때 가장 최근에 사용된 항목이 정확하거나 만료 시 타임스탬프가 최신 상태로 유지됩니다.
updateTimestamp함수는 다음과 같습니다.(url: string)=> {...}-
url
string
-
returns
Promise<void>
-
ExpirationPlugin
이 플러그인을 workbox-strategy에서 사용하여 캐시된 요청의 기간 또는 개수를 정기적으로 제한할 수 있습니다.
커스텀 cacheName 속성이 설정된 workbox-strategy 인스턴스에만 사용할 수 있습니다.
즉, 기본 런타임 캐시 이름을 사용하는 전략에서 항목을 만료하는 데 사용할 수 없습니다.
캐시된 응답이 사용되거나 업데이트될 때마다 이 플러그인은 연결된 캐시를 확인하여 이전 응답이나 추가 응답을 삭제합니다.
maxAgeSeconds를 사용하는 경우 캐시된 응답이 사용된 이후까지 만료 정리가 발생하지 않으므로 만료 후에 응답을 한 번 사용할 수 있습니다. 응답에 'Date' 헤더가 있는 경우 간단한 만료 검사가 수행되며 응답은 즉시 사용되지 않습니다.
maxEntries를 사용하면 가장 오래전에 요청된 항목이 캐시에서 먼저 삭제됩니다.
속성
-
생성자
void
constructor함수는 다음과 같습니다.(config?: ExpirationPluginOptions)=> {...}
-
config
-
returns
-
-
deleteCacheAndMetadata
void
이는 다음 두 작업을 수행하는 도우미 메서드입니다.
- 사용자 대신 caches.delete()를 호출하여 이 플러그인 인스턴스와 연결된 모든 기본 캐시 인스턴스를 삭제합니다.
- 각 Cache 인스턴스의 만료 세부정보를 추적하는 데 사용되는 IndexedDB에서 메타데이터를 삭제합니다.
캐시 만료를 사용하는 경우
caches.delete()를 직접 호출하는 것보다 이 메서드를 호출하는 것이 더 좋습니다. 이렇게 하면 IndexedDB 메타데이터도 깔끔하게 삭제되고 열려 있는 IndexedDB 인스턴스도 삭제됩니다.특정 캐시에 캐시 만료를 사용하지 않는 경우
caches.delete()를 호출하고 캐시 이름을 전달하는 것으로 충분합니다. 이 경우 정리하는 데 작업 상자별 메서드가 필요하지 않습니다.deleteCacheAndMetadata함수는 다음과 같습니다.()=> {...}-
returns
Promise<void>
ExpirationPluginOptions
속성
-
matchOptions
CacheQueryOptions 선택사항
-
maxAgeSeconds
number 선택사항
-
maxEntries
number 선택사항
-
purgeOnQuotaError
부울 선택사항