使用缓存 API 的第一步

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 Browser 11.8 及以上
Chrome for Android 67 及以上

没有支持 Internet Explorer。

除了Firefox和Chrome之外,其他浏览器的支持也被引入了,所以你应该记住这一点。

您的网站和应用程序,如果您打算支持不仅仅是运行上述浏览器的人员,那么此检查中应该有任何缓存 API 代码:

1if ('caches' in window) {
2  // The Cache API is supported
3
4  // You can add your code here
5}

与缓存一起工作

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

缓存链接到当前的来源(域),并且出于安全和隐私原因,您无法访问为其他人设置的缓存。

您可以设置多个不同的缓存. 若要查看当前源设置的所有缓存,您可以重复 caches.keys():

1caches.keys().then(keys => {
2  keys.map(key => {
3    console.log(key)
4  })
5})

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

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

添加到一个缓存

我们有三种方法:

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

您在成功的fetch()呼叫回调的承诺中呼叫cache.put():

1const cacheName = 'my-website-cache'
2const url = '/resource'
3fetch(url).then(res => {
4  return caches.open(cacheName).then(cache => {
5    return cache.put(url, res)
6  })
7})

在将其添加到缓存之前,您不必手动检索资源:缓存 API 会自动为您完成此操作。

1const cacheName = 'my-website-cache'
2const url = '/resource'
3caches.open(cacheName).then(cache => {
4  cache.add(url).then(() => {
5    //done!
6  }
7})

在这种情况下,在cache.add()呼叫之后,将发送一个 Fetch request到服务器,并将响应缓存。

cache.addAll() 用于向多个 URL 执行请求. 只有当所有资源已被提取和缓存时,才会调用回调函数:

1const cacheName = 'my-website-cache'
2const url1 = '/resource1'
3const url2 = '/resource2'
4caches.open(cacheName).then(cache => {
5  cache.addAll([url1, url2]).then(() => {
6    //all requests were cached
7  })
8})

从一个缓存中获取

使用 cache.match() 您可以获得存储的响应对象,与匹配您的查询的 URL 相符:

1const cacheName = 'my-website-cache'
2const url = '/resource'
3caches.open(cacheName).then(cache => {
4  cache.match(url).then(item => {
5    console.log(item)
6  }
7})

item 是您可以检查的请求对象,例如,您可以使用 `item.url’ 获取 URL。

Iterate Over All Items 在缓存中的所有项目

使用 cache.keys(),您可以获取在缓存中存在的所有项目,并重复它们:

1const cacheName = 'my-website-cache'
2const url = '/resource'
3caches.open(cacheName).then(cache => {
4  cache.keys().then(items => {
5    items.map(item => {
6      console.log(item)
7    })
8  }
9})

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

从缓存中删除一个项目

一旦资源被添加到缓存中,它会占用浏览器的存储空间,你可以手动清除任何你用原始 URL 存储的内容,将其传输到 cache.delete() 方法:

1const cacheName = 'my-website-cache'
2const url = '/resource'
3caches.open(cacheName).then(cache => {
4  cache.delete(url).then(() => {
5    //deleted successfully!
6  }
7})