缓存API指南

缓存API是Service Worker规范的一部分,是一种在资源缓存上发挥更大威力的好方法。

介绍

缓存API是Service Worker规范的一部分,是一种在资源缓存上发挥更大威力的好方法。

它可以让你缓存URL可寻址资源,表示资产,网页,HTTP API响应。

它是不是旨在缓存单个数据块,这是IndexedDB API

目前在Chrome> = 40,Firefox> = 39和Opera> = 27中可用。

Safari和Edge最近推出了对此功能的支持。

Internet Explorer不支持。

移动设备在Android上有很好的支持,在Android Webview和Android上的Chrome浏览器中都受支持,而在iOS上,只有Opera Mobile和Firefox Mobile用户才可以使用移动设备。

检测缓存API是否可用

缓存API通过以下方式公开caches目的。要检测API是否在浏览器中实现,只需使用以下命令检查其是否存在:

if ('caches' in window) {
  //ok
}

初始化缓存

使用caches.openAPI,返回一个承诺与一个快取物件准备使用:

caches.open('mycache').then(cache => {
  // you can start using the cache
})

mycache是用于标识要初始化的缓存的名称。就像变量名一样,您可以使用任何所需的名称。

如果缓存尚不存在,caches.open创建它。

将项目添加到缓存

cache对象公开了两种向缓存中添加项目的方法:addaddAll

cache.add()

add接受一个URL,并在调用时获取资源并对其进行缓存。

caches.open('mycache').then(cache => {
  cache.add('/api/todos')
})

要允许对提取进行更多控制,您可以传递一个代替字符串的字符串要求对象,是对象的一部分提取API规格:

caches.open('mycache').then(cache => {
  const options = {
    // the options
  }
  cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAll接受一个数组,并返回一个承诺当所有资源都已缓存时。

caches.open('mycache').then(cache => {
  cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
    //all requests were cached
  })
})

手动获取并添加

cache.add()自动获取资源并进行缓存。

缓存API通过以下方式对此提供了更精细的控制cache.put()。您负责获取资源,然后告诉Cache API存储响应:

const url = '/api/todos'
fetch(url).then(res => {
  return caches.open('mycache').then(cache => {
    return cache.put(url, res)
  })
})

从缓存中检索项目

cache.match()返回一个回复包含有关请求和网络请求响应的所有信息的对象

caches.open('mycache').then(cache => {
  cache.match('/api/todos').then(res => {
    //res is the Response Object
  })
})

获取缓存中的所有项目

caches.open('mycache').then(cache => {
  cache.keys().then(cachedItems => {
    //
  })
})

cachedItems是一个数组要求对象,其中包含资源中的网址url财产。

获取所有可用的缓存

caches.keys()方法列出了每个可用缓存的键。

caches.keys().then(keys => {
  // keys is an array with the list of keys
})

从缓存中删除项目

给定一个cache对象,其delete()方法从其中删除缓存的资源。

caches.open('mycache').then(cache => {
  cache.delete('/api/todos')
})

删除缓存

caches.delete()方法接受高速缓存标识符,并且在执行时会从系统中清除高速缓存及其高速缓存的项目。

caches.delete('mycache').then(() => {
  // deleted successfully
})

免费下载我的JavaScript初学者手册


更多浏览器教程: