저장용량 한도 이해

모든 브라우저는 웹 앱의 출처에서 사용할 수 있는 저장용량에 상한을 적용합니다. 웹사이트의 캐싱 효율성과 안정성에 영향을 줄 수 있는 스토리지 할당량 제한이 발생하지 않도록 런타임에 캐시되는 데이터를 자동으로 정리하도록 Workbox를 구성할 수 있습니다.

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

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

예를 들어 다음 구성은 명시적 제한과 할당량 초과 시 자동 정리 기능을 모두 사용하여 런타임에 이미지를 캐시하는 데 사용될 수 있습니다.

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의 시크릿 모드에서 웹 앱을 열면 일반 탐색 컨텍스트에는 적용되지 않는 저장용량에 대한 특별한 제한이 적용됩니다. 기기의 사용 가능한 여유 공간과 관계없이 약 100메가바이트의 할당량 제한이 있습니다.

불명확한 답변에 주의하세요.

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

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

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