Cache API指南

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

• 介紹
• 檢測是否支持Cache API
• 初始化快取
• 將項目添加到快取
  • cache.add()
  • cache.addAll()
  • 手動抓取並添加
• 從快取中檢索項目
• 獲取所有快取中的項目
• 獲取所有可用的快取
• 從快取中刪除項目
• 刪除快取

介紹

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，只需使用以下代码检查其是否存在：

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

初始化快取

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

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

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

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

将項目添加到快取

cache对象公开了两个方法来将项目添加到快取中：add和addAll。

cache.add()

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

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

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

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

cache.addAll()

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

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

手動抓取並添加

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

Cache 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()返回一个包含请求和网络请求的响应的Response对象。

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

獲取所有快取中的項目

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

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

獲取所有可用的快取

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

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

從快取中刪除項目

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

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

刪除快取

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

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