저장용량 한도 이해

모든 브라우저는 웹 앱의 원본에서 사용할 수 있는 저장용량의 상한선을 적용합니다. Workbox를 구성하면 런타임 시 캐시하는 데이터를 자동으로 정리하여 웹사이트의 캐싱 효율성과 안정성에 영향을 미칠 수 있는 저장용량 한도에 도달하지 않도록 할 수 있습니다.

어떤 구성 옵션이 지원되나요?

경로 및 런타임 캐싱 전략을 설정할 때 캐싱하는 애셋 유형에 가장 적합한 설정으로 구성된 workbox-expirationExpirationPlugin 인스턴스를 추가할 수 있습니다.

예를 들어 런타임 시 이미지를 캐시하는 데 다음 구성을 사용할 수 있으며, 명시적 한도는 물론 할당량 초과 시 자동 정리가 적용됩니다.

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

registerRoute(
  ({request}) => request.destination === 'image',
  // Use a cache-first strategy with the following config:
  new CacheFirst({
    // You need to provide a cache name when using expiration.
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        // Keep at most 50 entries.
        maxEntries: 50,
        // Don't keep any entries for more than 30 days.
        maxAgeSeconds: 30 * 24 * 60 * 60,
        // Automatically cleanup if quota is exceeded.
        purgeOnQuotaError: true
      })
    ]
  })
);

ExpirationPlugin를 사용할 때는 maxEntries, maxAgeSeconds 또는 둘 다를 설정해야 합니다. purgeOnQuotaError는 선택사항입니다.

maxEntries

이렇게 하면 특정 캐시의 항목 (즉, 고유 URL) 수의 상한이 적용됩니다.

특정 전략에 따라 처리할 수 있는 URL의 수가 적다는 사실을 모르는 경우가 아니라면 이 값을 설정하는 것이 좋습니다.

maxAgeSeconds

이 시간(초)보다 이전에 캐시에 추가된 항목은 오래된 것으로 간주되고 다음에 캐시에 액세스하면 자동으로 삭제됩니다.

이는 항목이 짧은 기간 내에 모두 추가된 경우 캐시가 임의로 커질 수 있으므로 스토리지 할당량을 관리하는 데 maxEntries만큼 효과적이지는 않습니다. 적용할 최신성의 상한선이 있고 오래된 항목을 유지하는 것은 웹 앱에 거의 도움이 되지 않는 경우에 가장 유용합니다.

purgeOnQuotaError

이 옵션을 사용하면 웹 앱이 사용 가능한 저장용량을 초과하는 경우 자동으로 삭제할 수 있는 안전한 캐시로 표시할 수 있습니다.

이 옵션은 현재 false로 기본 설정됩니다. 일반적으로 런타임 캐시는 삭제되더라도 복원력이 우수해야 하므로 이 옵션을 true로 설정하는 것이 좋습니다. 이렇게 하면 웹 앱이 저장용량 제약이 발생했을 때 자동으로 복구될 수 있습니다.

얼마나 많은 데이터를 저장할 수 있나요?

브라우저마다 스토리지의 상한선이 있으므로 정답은 없습니다. 또한 일부 브라우저에는 특정 기기에서 사용할 수 있는 저장용량에 따라 달라지는 동적 한도가 있습니다. 따라서 유효한 상한은 예고 없이 변경될 수 있습니다.

일부 브라우저는 navigator.storage.estimate()를 통해 원본에서 사용 중인 대략적인 스토리지 용량과 상한을 쿼리하기 위한 인터페이스를 노출합니다. 웹 앱에서 이 공간을 사용하는 방법에 관한 자세한 내용은 '사용 가능한 저장공간 예상' 도움말을 참조하세요.

Chrome 시크릿 모드의 특별 고려사항

Chrome의 시크릿 모드에서 웹 앱을 열면 일반 브라우징 컨텍스트에는 적용되지 않는 저장용량에 특별한 제한이 적용됩니다. 즉, 기기에서 사용할 수 있는 여유 공간에 관계없이 할당량 한도는 약 100MB입니다.

불투명한 응답에 주의하세요.

예기치 않게 많은 할당량이 사용되는 일반적인 원인은 불투명 응답, 즉 CORS를 사용 설정하지 않은 상태로 생성된 요청에 대한 교차 출처 응답의 런타임 캐싱입니다.

브라우저는 보안 고려사항으로 이러한 불투명 응답의 할당량 영향을 자동으로 확장합니다. 예를 들어 Chrome에서는 몇 킬로바이트의 불투명한 응답이라도 할당량 사용량에 약 7MB가 사용됩니다.

불투명한 응답 캐싱을 시작하면 예상보다 훨씬 많은 할당량이 빠르게 소진될 수 있으므로 maxEntries와 함께 ExpirationPlugin를 사용하고 적절하게 구성된 purgeOnQuotaError는 가능한 경우 사용하는 것이 좋습니다.