Cache

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

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

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

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

Note: Cache.put, Cache.add, 그리고Cache.addAll 은 오직 GET 요청들만 cache로 저장됩니다.

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

메서드

Cache.match(request, options)
Cache객체의 첫 번째 일치하는 요청과 관련된 응답으로 확인되는 Promise를 반환합니다.
Cache.matchAll(request, options)
Cache 객체에서 일치하는 모든 요청의 배열로 해석되는 Promise를 반환합니다.
Cache.add(request)
URL을 가져 와서 추출해서 결과 객체를 지정된 캐시에 추가합니다. 이는 fetch()를 호출 한 다음 Cache.put()을 사용하여 캐시에 결과를 추가하는 것과 매우 유사합니다.
Cache.addAll(requests)
URL 배열을 가져 와서 추출하고 결과 응답 객체를 지정된 캐시에 추가합니다.
Cache.put(request, response)
요청과 응답을 모두 가져 와서 지정된 캐시에 추가합니다.
Cache.delete(request, options)
해당 키가 request인 Cache를 찾고 Cache를 삭제하고 true 판정인 Promise를 리턴합니다. Cache 항목이 없으면 false를 반환합니다.
Cache.keys(request, options)
Cache 키 배열은 결정된 Promise를 리턴합니다.

예제

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

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

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

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

Note: 크롬에서, chrome://inspect/#service-workers 를 방문하여 "inspect" 를 클릭하여 service-worker.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 Status Comment
Service Workers
The definition of 'Cache' in that specification.
Working Draft Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Cache
Experimental
Chrome Full support 43
Notes
Full support 43
Notes
Notes From 40 to 42, this was only available on service workers.
Edge Full support YesFirefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 30
Notes
Full support 30
Notes
Notes From 27 to 29, this was only available on service workers.
Safari Full support 11WebView Android Full support 43
Notes
Full support 43
Notes
Notes From 40 to 42, this was only available on service workers.
Chrome Android Full support 43
Notes
Full support 43
Notes
Notes From 40 to 42, this was only available on service workers.
Firefox Android Full support 39Opera Android Full support 30
Notes
Full support 30
Notes
Notes From 27 to 29, this was only available on service workers.
Safari iOS No support NoSamsung Internet Android Full support 4.0
add
Experimental
Chrome Full support 44
Notes
Full support 44
Notes
Notes Requires HTTPS from version 46.
Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 31
Notes
Full support 31
Notes
Notes Requires HTTPS from version 33.
Safari Full support 11WebView Android Full support 44
Notes
Full support 44
Notes
Notes Requires HTTPS from version 46.
Chrome Android Full support 44
Notes
Full support 44
Notes
Notes Requires HTTPS from version 46.
Firefox Android Full support 39Opera Android Full support 32
Notes
Full support 32
Notes
Notes Requires HTTPS from version 33.
Safari iOS No support NoSamsung Internet Android Full support 4.0
addAll
Experimental
Chrome Full support 46
Notes
Full support 46
Notes
Notes Requires HTTPS.
Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 33
Notes
Full support 33
Notes
Notes Requires HTTPS.
Safari Full support 11WebView Android Full support 46
Notes
Full support 46
Notes
Notes Requires HTTPS.
Chrome Android Full support 46
Notes
Full support 46
Notes
Notes Requires HTTPS.
Firefox Android Full support 39Opera Android Full support 33
Notes
Full support 33
Notes
Notes Requires HTTPS.
Safari iOS No support NoSamsung Internet Android Full support 5.0
delete
Experimental
Chrome Full support 43Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 30Safari Full support 11WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 39Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support 4.0
keys
Experimental
Chrome Full support 43Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 30Safari Full support 11WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 39Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support 4.0
match
Experimental
Chrome Full support 43Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 30Safari Full support 11WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 39Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support 4.0
matchAll
Experimental
Chrome Full support 47Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 34
Notes
Full support 34
Notes
Notes Requires HTTPS.
Safari Full support 11WebView Android Full support 47Chrome Android Full support 47Firefox Android Full support 39Opera Android Full support 34Safari iOS No support NoSamsung Internet Android Full support 5.0
put
Experimental
Chrome Full support 43
Notes
Full support 43
Notes
Notes Requires HTTPS from version 46.
Edge Full support 16Firefox Full support 39
Notes
Full support 39
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 30
Notes
Full support 30
Notes
Notes Requires HTTPS from version 33.
Safari Full support 11WebView Android Full support 43
Notes
Full support 43
Notes
Notes Requires HTTPS from version 46.
Chrome Android Full support 43
Notes
Full support 43
Notes
Notes Requires HTTPS from version 46.
Firefox Android Full support 39Opera Android Full support 30
Notes
Full support 30
Notes
Notes Requires HTTPS from version 33.
Safari iOS No support NoSamsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

같이 보기