We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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

The Cache interface of the ServiceWorker API represents the storage for Request / Response object pairs that are cached as part of the ServiceWorker life cycle.

A domain can have multiple, named Cache objects, whose contents are entirely under the control of service workers.

You are responsible for implementing how the ServiceWorker script handles Cache updates. Items in a Cache do not get updated unless explicitly requested; they don’t expire unless deleted. Use CacheStorage.open(cacheName) to open a specific named Cache object and then call any of the Cache methods to maintain the Cache.

You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the ServiceWorker that they can safely operate on. See Deleting old caches for more information.

Note: The Cache interface is exposed to windowed scopes as well as workers; you don't have to use it in conjunction with service workers.

Note: Cache.putCache.add, and Cache.addAll only allow GET requests to be stored in the cache.

Note: Initial Cache implementations (in both Blink and Gecko) resolve Cache.add, Cache.addAll, and Cache.put promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

Note: As of Chrome 46, the Cache API will only store requests from secure origins, meaning those served over HTTPS.


Cache.match(request, options)
Returns a Promise that resolves to the response associated with the first matching request in the Cache object.
Cache.matchAll(request, options)
Returns a Promise that resolves to an array of all matching requests in the Cache object.
Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.
Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.
Cache.put(request, response)
Takes both a request and its response and adds it to the given cache.
Cache.delete(request, options)
Finds the Cache entry whose key is the request, and if found, deletes the Cache entry and returns a Promise that resolves to true. If no Cache entry is found, it returns false.
Cache.keys(request, options)
Returns a Promise that resolves to an array of Cache keys.


This code snippet is from the service worker selective caching sample. (see selective caching live) The code uses CacheStorage.open(cacheName) to open any Cache objects with a Content-Type header that starts with font/.

The code then uses Cache.match(request, options) to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses Cache.put(request, response) to cache the fetched resource.

The code handles exceptions thrown from the fetch() operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in CURRENT_CACHES.

Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.

// Shorthand identifier mapped to specific versioned cache.
  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.
    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);

    // 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.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 41 (41) No support 24 No support
add() 44.0 ? ? ? ?
addAll() 46.0 ? ? ? ?
matchAll() 46.0 ? ? ? ?
Require HTTPS for add(), addAll(), and put() 46.0 ? ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support 41.0 (41) ? No support ? No support 40.0
add() No support No support ? ? ? ? ? 44.0
addAll() No support No support ? ? ? ? ? 46.0
matchAll() No support No support ? ? ? ? ? 46.0
Require HTTPS for add(), addAll(), and put() No support No support ? ? ? ? ? 46.0

See also

문서 태그 및 공헌자

이 페이지의 공헌자: jpmedley
최종 변경: jpmedley,