上篇文章介绍了文件的缓存，这里我们介绍一下Cache API的属性和方法。
检查浏览器是否支持Cache API
if('caches' in window){
//支持
}
创建缓存
caches.open('example-cache').then(function(cache) {
//创建一个名为example-cache的缓存并返回一个cache对象
});
Cache API提供了很多创建和处理缓存中的数据的方法。
创建数据
这里有三种方法将数据添加到缓存中：
1、add
add方法获取一个URL，获取它，并将生成的响应对象添加到给定的缓存中。
caches.open('example-cache').then(function(cache) {
cache.add('/example-file.html');
});
2、addAll
此方法与add相同，只不过它需要一个数组并将其添加到缓存中。 如果有任何文件无法添加到缓存中，则整个操作将失败，并且不会添加任何文件。
caches.open(cacheName).then(function(cache) {
return cache.addAll(
[
'/css/bootstrap.css',
'/css/main.css',
'/js/bootstrap.min.js',
'/js/jquery.min.js',
'/offline.html'
]
);
})
3、put
这个方法同时使用请求和响应对象，并将它们添加到缓存中。
fetch(url).then(function (response) {
return cache.put(url, response);
})
匹配数据
匹配数据有两种方法：match和matchAll。
caches.match（request，options） - 此方法返回一个Promise，该Promise解析为与缓存或缓存中第一个匹配请求关联的响应对象。 如果找不到匹配，它将返回undefined。 第一个参数是请求，第二个参数是可选的选项列表，用于优化搜索。 以下是由MDN定义的选项：
- ignoreSearch：一个布尔值，指定是否忽略URL中的查询字符串。 例如，如果设置为true，则执行匹配时将忽略http://foo.com/?value=bar的？value = bar部分。 它默认为false。
- ignoreMethod：布尔值，当设置为true时，阻止匹配操作验证请求HTTP方法（通常只允许GET和HEAD）。默认为false。
- ignoreVary：布尔值，当设置为true时，表示匹配操作不执行VARY头匹配 - 也就是说，如果URL匹配，则无论Response对象是否具有VARY头，都会得到匹配结果。 它默认为false。
- cacheName：表示要在其中进行搜索的特定缓存的DOMString。 请注意，该选项被Cache.match（）忽略。
caches.matchAll（request，options） - 此方法与.match相同，不同的是它从缓存中返回所有匹配的响应而不是第一个。 例如，如果您的应用程序缓存了图像文件夹中包含的某些图像，则可以返回所有图像并对其执行一些操作：
caches.open('example-cache').then(function(cache) {
cache.matchAll('/images/').then(function(response) {
response.forEach(function(element, index, array) {
cache.delete(element);
});
});
})
删除数据
我们可以用cache.delete（request，options）删除缓存中的项目。 此方法找到与请求匹配的缓存中的项目，将其删除，并返回一个解析为true的Promise。 如果找不到该项目，则会解析为false。 它也具有与匹配方法相同的可选选项参数。
检索缓存键
我们可以使用cache.keys（request，options）获取缓存键列表。 这将返回一个可解析为缓存键数组的Promise。 这些将按照插入缓存的顺序返回。 这两个参数是可选的。 如果没有传递，cache.keys将返回缓存中的所有请求。 如果请求成功，它将从缓存中返回所有匹配的请求。 可选项与前面的方法相同。
keys方法也可以在缓存入口点上调用，以返回缓存本身的缓存键。 这可以让您一次性清除过期的缓存。
参考链接：
1.https://developer.mozilla.org/en-US/docs/Web/API/Cache
2.https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker#using_the_cache_api
