使用缓存API的第一步

创建缓存 API 是为了允许 Service Workers 对资源的缓存进行更深入和细粒度的控制。

通过缓存 API，Service Worker 可以决定缓存资源以供离线使用并在以后检索它们。

对于资源，我们指的是来自 URL 的完整响应，例如 HTML 页面、CSS、JavaScript 文件、图像、JSON 以及您的网页或 Web 应用程序可以使用的任何其他资源。

浏览器支持

如果不详细说明支持哪些浏览器，就无法谈论最近的 Web 技术。

在 Cache API 的情况下，我们谈论的是：

Firefox 39 及更高版本
铬 40 及更高版本
Opera 29 及更高版本
Safari 11.1 及更高版本
iOS Safari 11.4 及更高版本
Edge 17 及更高版本
UC 浏览器 11.8 及更高版本
适用于 Android 67 及更高版本的 Chrome

不支持 Internet Explorer。

除了 Firefox 和 Chrome，最近才真正引入了其他浏览器的支持，所以你应该记住这一点。

如果您计划支持的不仅仅是运行上述浏览器的人，您的站点和应用程序应该在此检查中包含任何缓存 API 代码：

if ('caches' in window) {
  // The Cache API is supported

  // You can add your code here
}

使用缓存

if ('caches' in window) {
  // The Cache API is supported
  const cacheName = 'my-website-cache'
  caches.open(cacheName).then(cache => {
    // you can start using the cache
  })
}

缓存链接到当前源（域），出于安全和隐私原因，您无法访问为其他人设置的缓存。

您可以设置几个不同的缓存。要查看为当前原点设置的所有缓存，您可以遍历 caches.keys()：

caches.keys().then(keys => {
  keys.map(key => {
    console.log(key)
  })
})

您可以通过调用 delete() 方法删除一个缓存：

const cacheName = 'my-website-cache'
caches.delete(cacheName).then(() => {
  console.log('Cache deleted')
})

添加到缓存

我们有3种方法：

cache.put()
cache.add()
cache.addAll()

您在 fetch() 调用的成功承诺回调中调用 cache.put() ：

const cacheName = 'my-website-cache'
const url = '/resource'
fetch(url).then(res => {
  return caches.open(cacheName).then(cache => {
    return cache.put(url, res)
  })
})

使用 cache.add()，您不必在将资源添加到缓存之前手动获取资源：缓存 API 会自动为您完成此操作。

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.add(url).then(() => {
    //done!
  }
})

在这种情况下，在调用 cache.add() 之后，将向服务器发送 Fetch 请求，并缓存响应。

cache.addAll() 用于执行对多个 URL 的请求。回调函数只有在所有资源都被获取和缓存后才会被调用：

const cacheName = 'my-website-cache'
const url1 = '/resource1'
const url2 = '/resource2'
caches.open(cacheName).then(cache => {
  cache.addAll([url1, url2]).then(() => {
    //all requests were cached
  })
})

从缓存中检索

使用 cache.match() 您可以获得与您的查询匹配的 URL 对应的 Response 对象：

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.match(url).then(item => {
    console.log(item)
  }
})

item 是一个 Request 对象，您可以对其进行检查，例如，您可以使用 item.url 获取 URL。

遍历缓存中的所有项目

使用 cache.keys() 您可以获取缓存中存在的所有项目，并对其进行迭代：

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.keys().then(items => {
    items.map(item => {
      console.log(item)
    })
  }
})

每个项目都是一个 Request 对象。

从缓存中删除项目

将资源添加到缓存后，它会占用浏览器存储空间中的一些空间。您可以手动清除通过原始 URL 存储的任何内容，将其传递给 cache.delete() 方法：

const cacheName = 'my-website-cache'
const url = '/resource'
caches.open(cacheName).then(cache => {
  cache.delete(url).then(() => {
    //deleted successfully!
  }
})