Cache

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

Cache 인터페이스는 ServiceWorker 의 생명주기의 일부로 캐시 된 RequestResponse를 나타냅니다.

도메인은 여러개의 이름이 지정된 Cache 객체를 가질 수 있으며 그 객체들은 ServiceWorker가 완전히 제어합니다.ServiceWorker 스크립트가 Cache 업데이트를 어떻게 컨트롤 할지에 대해서 구현해야 합니다. 명시적으로 요청하지 않으면 Cache 항목들은 업데이트 되지 않습니다. 삭제되지 않으면 만료되지 않습니다. CacheStorage.open(cacheName) (en-US) 을 사용하여 특정 이름으로 지정 된 Cache 객체를 로드하고 Cache 메서드를 호출하여 캐시를 유지 관리합니다.

또한 캐시 항목을 정기적으로 삭제해야 합니다. 각각의 브라우저는 ServiceWorker가 사용할 수 있는 캐시 저장소의 양에 대해서 제한을 엄격하게 두고 있습니다. 브라우저는 디스크 공간을 관리하기 위해서 최선을 다하지만 원본에 대한 캐시 저장소를 삭제할 수 있습니다. 브라우저는 일반적으로 원본에 대한 모든 데이터를 삭제하거나 원본에 대한 모든 데이터를 삭제하지 않을 것입니다. 이름지어진 특정 캐시 버전을 확인하고 안전하게 작동할 수 있는 ServiceWorker 버전에서만 캐시를 사용하십시오. 캐시 삭제에 대한 자세한 내용은 Deleting old caches (en-US)을 참고하세요.

참고: 초기 캐시 구현(Blink 및 Gecko)은 응답이 완전히 기록될 때 Cache.add (en-US), Cache.addAll (en-US), 그리고 Cache.put (en-US) 로 확인 됩니다. 보다 최근 사양 버전에서의 최신언어들은 응답이 여전히 스트리밍이 되는 경우에도 해당 내용이 데이터베이스에 기록되는 즉시 브라우저가 확인할 수 있습니다.

참고: Cache.put (en-US), Cache.add (en-US), 그리고Cache.addAll (en-US) 은 오직 GET 요청들만 cache로 저장됩니다.

참고: 캐시 API는 HTTP 캐시 헤더를 따르지 않습니다.

메서드

Cache.match(request, options) (en-US)

Cache객체의 첫 번째 일치하는 요청과 관련된 응답으로 확인되는 Promise를 반환합니다.

Cache.matchAll(request, options) (en-US)

Cache 객체에서 일치하는 모든 요청의 배열로 해석되는 Promise를 반환합니다.

Cache.add(request) (en-US)

URL을 가져 와서 추출해서 결과 객체를 지정된 캐시에 추가합니다. 이는 fetch()를 호출 한 다음 Cache.put()을 사용하여 캐시에 결과를 추가하는 것과 매우 유사합니다.

Cache.addAll(requests) (en-US)

URL 배열을 가져 와서 추출하고 결과 응답 객체를 지정된 캐시에 추가합니다.

Cache.put(request, response) (en-US)

요청과 응답을 모두 가져 와서 지정된 캐시에 추가합니다.

Cache.delete(request, options) (en-US)

해당 키가 request인 Cache를 찾고 Cache를 삭제하고 true 판정인 Promise를 리턴합니다. Cache 항목이 없으면 false를 반환합니다.

Cache.keys(request, options) (en-US)

Cache 키 배열은 결정된 Promise를 리턴합니다.

예제

이 코드는 service worker selective caching sample 에서 가져왔습니다. (see selective caching live). 이 코드는CacheStorage.open(cacheName) (en-US)을 사용하여 font/로 시작하는 Content-Type header로 Cache를 엽니다.

그런 다음 코드는 Cache.match(request, options) (en-US)를 사용하여 캐시에 이미 일치하는 글꼴이 있는지 확인한 후 일치하는 글꼴을 반환합니다. 일치하는 글꼴이 없으면 코드는 네트워크에서 글꼴을 가져오고 Cache.put(request, response) (en-US)을 사용하여 가져온 리소스를 캐시합니다.

이 코드는 fetch() (en-US) 연산에서 발생한 예외를 처리합니다. HTTP오류 응답(예 : 404)은 예외를 발생시키지 않습니다. 적절한 오류 코드가있는 일반 응답 객체를 리턴합니다.

또한 코드 스니펫은 {domxref ( "ServiceWorker")}}가 사용하는 캐시 버전 관리를 위한 모범 사례를 보여줍니다. 이 예에서는 캐시가 하나 밖에 없지만 동일한 접근법을 여러 캐시에 사용할 수 있습니다. 캐시의 단축 식별자를 특정 버전의 캐시 이름에 매핑합니다. 또한 이 코드는 CURRENT_CACHES에 이름이 지정되지 않은 모든 캐시를 삭제합니다.

참고: 크롬에서, chrome://inspect/#service-workers 를 방문하여 "inspect" 를 클릭하여 service-worker.js 스크립트가 수행중인 다양한 작업에 대한 로깅 구문을 확인합니다.

js
var CACHE_VERSION = 1;

// Shorthand identifier mapped to specific versioned cache.
var CURRENT_CACHES = {
  font: "font-cache-v" + CACHE_VERSION,
};

self.addEventListener("activate", function (event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
    return CURRENT_CACHES[key];
  });

  // Active worker won't be treated as activated until promise resolves successfully.
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log("Deleting out of date cache:", cacheName);

            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
});

self.addEventListener("fetch", function (event) {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    // Opens Cache objects that start with 'font'.
    caches.open(CURRENT_CACHES["font"]).then(function (cache) {
      return cache
        .match(event.request)
        .then(function (response) {
          if (response) {
            console.log(" Found response in cache:", response);

            return response;
          }
        })
        .catch(function (error) {
          // Handles exceptions that arise from match() or fetch().
          console.error("  Error in fetch handler:", error);

          throw error;
        });
    }),
  );
});

명세

Specification
Service Workers
# cache-interface

브라우저 호환성

BCD tables only load in the browser

같이 보기