Cache
=====

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

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

도메인은 여러개의 이름이 지정된 `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 with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)