使用 Cache API 的第一步

发表 admin at 2024年8月26日

类别

未分类

标签

创建 Cache API 是为了让服务工作者能够对资源缓存进行更深入、更细粒度的控制。

通过缓存 API，服务工作者可以决定缓存资源以供离线使用并在以后检索它们。

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

浏览器支持

在谈论最新的网络技术时，如果不详细说明哪些浏览器受支持，就无法谈论最新的网络技术。

对于 Cache API，我们讨论的是：

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

不支持 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')
})

添加到缓存

我们有三种方法：

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

你调用cache.put()一个调用成功的承诺回调fetch()：

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()不需要在将资源添加到缓存之前手动获取它：Cache 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 对象，例如，您可以使用获取 URL item.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)
    })
  }
})

每个项目都是一个请求对象。

从缓存中删除项目

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

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