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 | if ('caches' in window) { |
初始化快取
使用caches.open
API,它返回一个准备好使用的快取对象的Promise:
1 | caches.open('mycache').then(cache => { |
mycache
是我用来标识要初始化的快取的名称。这类似于变量名称,您可以使用任何想要的名称。
如果快取尚不存在,caches.open
会创建它。
将項目添加到快取
cache
对象公开了两个方法来将项目添加到快取中:add
和addAll
。
cache.add()
add
接受一个URL,并在调用时获取该资源并将其缓存起来。
1 | caches.open('mycache').then(cache => { |
为了在获取方面更具控制性,您可以传递一个请求对象而不是字符串,这是Fetch API规范的一部分:
1 | caches.open('mycache').then(cache => { |
cache.addAll()
addAll
接受一个数组,并在所有资源缓存完成后返回一个Promise。
1 | caches.open('mycache').then(cache => { |
手動抓取並添加
cache.add()
会自动获取资源并缓存它。
Cache API通过cache.put()
提供了对此的更精细的控制。您需要负责获取资源,然后告诉Cache API存储响应:
1 | const url = '/api/todos' |
從快取中檢索項目
cache.match()
返回一个包含请求和网络请求的响应的Response对象。
1 | caches.open('mycache').then(cache => { |
獲取所有快取中的項目
1 | caches.open('mycache').then(cache => { |
cachedItems是一个包含url
属性中资源URL的请求对象数组。
獲取所有可用的快取
caches.keys()
方法列出了每个可用快取的键。
1 | caches.keys().then(keys => { |
從快取中刪除項目
给定一个cache
对象,可以使用其delete()
方法从中删除缓存的资源。
1 | caches.open('mycache').then(cache => { |
刪除快取
caches.delete()
方法接受一个快取标识符,并在执行时从系统中清除快取及其缓存的项。
1 | caches.delete('mycache').then(() => { |
tags: [“Cache API”, “Service Worker”, “caching”, “resources”, “IndexedDB API”]