{{SeeCompatTable}}{{APIRef("Service Workers API")}}
Cache 인터페이스는 {{domxref ( "ServiceWorker")}} 의 생명주기의 일부로 캐시 된 Request와 Response를 나타냅니다.
도메인은 여러개의 이름이 지정된 Cache 객체를 가질 수 있으며 그 객체들은 {{domxref("ServiceWorker")}}가 완전히 제어합니다.{{domxref("ServiceWorker")}} 스크립트가 Cache 업데이트를 어떻게 컨트롤 할지에 대해서 구현해야 합니다. 명시적으로 요청하지 않으면 Cache 항목들은 업데이트 되지 않습니다. 삭제되지 않으면 만료되지 않습니다. {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 을 사용하여 특정 이름으로 지정 된 Cache 객체를 로드하고 Cache 메서드를 호출하여 캐시를 유지 관리합니다.
또한 캐시 항목을 정기적으로 삭제해야 합니다. 각각의 브라우저는 {{domxref("ServiceWorker")}}가 사용할 수 있는 캐시 저장소의 양에 대해서 제한을 엄격하게 두고 있습니다. 브라우저는 디스크 공간을 관리하기 위해서 최선을 다하지만 원본에 대한 캐시 저장소를 삭제할 수 있습니다. 브라우저는 일반적으로 원본에 대한 모든 데이터를 삭제하거나 원본에 대한 모든 데이터를 삭제하지 않을 것입니다. 이름지어진 특정 캐시 버전을 확인하고 안전하게 작동할 수 있는 {{domxref("ServiceWorker")}} 버전에서만 캐시를 사용하십시오. 캐시 삭제에 대한 자세한 내용은 Deleting old caches을 참고하세요.
Note: 초기 캐시 구현(Blink 및 Gecko)은 응답이 완전히 기록될 때 {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 그리고 {{domxref("Cache.put")}} 로 확인 됩니다. 보다 최근 사양 버전에서의 최신언어들은 응답이 여전히 스트리밍이 되는 경우에도 해당 내용이 데이터베이스에 기록되는 즉시 브라우저가 확인할 수 있습니다.
Note: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, 그리고{{domxref("Cache.addAll")}} 은 오직 GET 요청들만 cache로 저장됩니다.
Note: 캐시 API는 HTTP 캐시 헤더를 따르지 않습니다.
true 판정인 {{jsxref("Promise")}}를 리턴합니다. {{domxref("Cache")}} 항목이 없으면 false를 반환합니다.이 코드는 service worker selective caching sample 에서 가져왔습니다. (see selective caching live). 이 코드는{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}을 사용하여 font/로 시작하는 Content-Type header로 Cache를 엽니다.
그런 다음 코드는 {{domxref("Cache.match", "Cache.match(request, options)")}}를 사용하여 캐시에 이미 일치하는 글꼴이 있는지 확인한 후 일치하는 글꼴을 반환합니다. 일치하는 글꼴이 없으면 코드는 네트워크에서 글꼴을 가져오고 {{domxref("Cache.put","Cache.put(request, response)")}}을 사용하여 가져온 리소스를 캐시합니다.
이 코드는 {{domxref("Globalfetch.fetch","fetch()")}} 연산에서 발생한 예외를 처리합니다. HTTP오류 응답(예 : 404)은 예외를 발생시키지 않습니다. 적절한 오류 코드가있는 일반 응답 객체를 리턴합니다.
또한 코드 스니펫은 {domxref ( "ServiceWorker")}}가 사용하는 캐시 버전 관리를 위한 모범 사례를 보여줍니다. 이 예에서는 캐시가 하나 밖에 없지만 동일한 접근법을 여러 캐시에 사용할 수 있습니다. 캐시의 단축 식별자를 특정 버전의 캐시 이름에 매핑합니다. 또한 이 코드는 CURRENT_CACHES에 이름이 지정되지 않은 모든 캐시를 삭제합니다.
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 |
|---|---|---|
| {{SpecName('Service Workers', '#cache', 'Cache')}} | {{Spec2('Service Workers')}} | Initial definition. |
{{Compat("api.Cache")}}