/

Cache API指南

Cache API指南

Cache API是Service Worker规范的一部分,是一种更擅长资源缓存的强大方法。

介紹

Cache API是Service Worker规范的一部分,是一种更擅长资源缓存的强大方法。

它允许您缓存可通过URL访问的资源,这包括资产,网页和HTTP API响应。

适用于缓存单个数据块,这是IndexedDB API的任务。

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

Safari和Edge最近开始支持它。

Internet Explorer不支持该API。

在Android上的移动设备支持良好,在Android Webview和Chrome for Android上受支持,而在iOS上仅适用于Opera Mobile和Firefox Mobile用户。

檢測是否支持Cache API

Cache API通过caches对象公开。要检测浏览器是否实现了该API,只需使用以下代码检查其是否存在:

1
2
3
if ('caches' in window) {
// ok
}

初始化快取

使用caches.open API,它返回一个准备好使用的快取对象Promise

1
2
3
caches.open('mycache').then(cache => {
// 您可以开始使用快取
})

mycache是我用来标识要初始化的快取的名称。这类似于变量名称,您可以使用任何想要的名称。

如果快取尚不存在,caches.open会创建它。

将項目添加到快取

cache对象公开了两个方法来将项目添加到快取中:addaddAll

cache.add()

add接受一个URL,并在调用时获取该资源并将其缓存起来。

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

为了在获取方面更具控制性,您可以传递一个请求对象而不是字符串,这是Fetch API规范的一部分:

1
2
3
4
5
6
caches.open('mycache').then(cache => {
const options = {
// 选项
}
cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAll接受一个数组,并在所有资源缓存完成后返回一个Promise

1
2
3
4
5
caches.open('mycache').then(cache => {
cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
// 所有请求都已被缓存
})
})

手動抓取並添加

cache.add()会自动获取资源并缓存它。

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

1
2
3
4
5
6
const url = '/api/todos'
fetch(url).then(res => {
return caches.open('mycache').then(cache => {
return cache.put(url, res)
})
})

從快取中檢索項目

cache.match()返回一个包含请求和网络请求的响应的Response对象。

1
2
3
4
5
caches.open('mycache').then(cache => {
cache.match('/api/todos').then(res => {
// res是响应对象
})
})

獲取所有快取中的項目

1
2
3
4
5
caches.open('mycache').then(cache => {
cache.keys().then(cachedItems => {
//
})
})

cachedItems是一个包含url属性中资源URL的请求对象数组。

獲取所有可用的快取

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

1
2
3
caches.keys().then(keys => {
// keys是一个键的列表数组
})

從快取中刪除項目

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

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

刪除快取

caches.delete()方法接受一个快取标识符,并在执行时从系统中清除快取及其缓存的项。

1
2
3
caches.delete('mycache').then(() => {
// 删除成功
})

tags: [“Cache API”, “Service Worker”, “caching”, “resources”, “IndexedDB API”]