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



Cache 接口提供缓存的 Request / Response 对象对的存储机制,例如作为ServiceWorker 生命周期的一部分。 Cache 接口像 workers 一样, 是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中,  但是它不必一定要配合 service worker 使用.

一个域可以有多个 Cache 对象.  你将在你的代码中处理和更新缓存 (e.g. in a ServiceWorker) . 在 Cache 除非显示地更新缓存, 否则缓存将不会被更新; 缓存数据不会过期, 除非删除它. 使用 CacheStorage.open(cacheName) 打开一个Cache 对象, 再使用 Cache 对象的方法去处理缓存.

你需要定期地清理缓存条目, 因为每个浏览器都严格限制了一个域下缓存数据的大小. 浏览器尽其所能去管理磁盘空间, 浏览器有可能去删除一个域下的缓存数据.   确保你的代码可以安全地操作缓存. 查看 Deleting old caches 获取更多信息.

Note: Cache.putCache.addCache.addAll只能在GET请求下使用。

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.

Note: The key matching algorithm depends on the VARY header in the value. So matching a new key requires looking at both key and value for entries in the Cache.

Note: The caching API doesn't honor HTTP caching headers.


Cache.match(request, options)
返回一个 Promise对象,resolve的结果是跟 Cache 对象匹配的第一个已经缓存的请求。
Cache.matchAll(request, options)
返回一个Promise 对象,resolve的结果是跟Cache对象匹配的所有请求组成的数组。
抓取这个URL, 检索并把返回的response对象添加到给定的Cache对象.这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将response添加到cache中.
Cache.put(request, response)
Cache.delete(request, options)
搜索key值为request的Cache 条目。如果找到,则删除该Cache 条目,并且返回一个resolve为true的Promise对象;如果未找到,则返回一个resolve为false的Promise对象。
Cache.keys(request, options)


此代码段来自 service worker selective caching sample. (请参阅 selective caching live) 。该代码使用CacheStorage.open(cacheName) 打开任何具有以font/开始的Content-Type头的Cache对象。

代码然后使用Cache.match(request, options)查看缓存中是否已经有一个匹配的font,如果是,则返回它。 如果没有匹配的字体,代码将通过网络获取字体,并使用 Cache.put(request, response)来缓存获取的资源。

代码处理从fetch() 操作抛出的异常。 请注意,HTTP错误响应(例如404)不会触发异常。 它将返回一个具有相应错误代码集的正常响应对象。

该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。 虽然在这个例子中只有一个缓存,但同样的方法可用于多个缓存。 它将缓存的速记标识符映射到特定的版本化缓存名称。 代码还会删除命名不在CURRENT_CACHES中的所有缓存。

注意: 在Chrome中,请访问chrome://inspect/#service-workers ,然后单击注册的服务工作线程下面的“inspect”链接,查看 service-worker.js 脚本正在执行的各种操作的日志记录。

// 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
Working Draft Initial definition.


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 39 (39)[1] 未实现 24 未实现
add() 44.0 (Yes)[1] ? ? ?
addAll() 46.0 (Yes)[1] ? ? ?
matchAll() 47.0 (Yes)[1] ? ? ?
Require HTTPS for add(), addAll(), and put() 46.0 (Yes)[1] ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 未实现 39.0 (39) ? 未实现 ? 未实现 40.0
add() 未实现 未实现 (Yes) ? ? ? ? 44.0
addAll() 未实现 未实现 (Yes) ? ? ? ? 46.0
matchAll() 未实现 未实现 (Yes) ? ? ? ? 46.0
Require HTTPS for add(), addAll(), and put() 未实现 未实现 (Yes) ? ? ? ? 46.0

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)



最后编辑者: flyingsouthwind,