Progressive Web Apps(PWA)核心技术-使用Cache API

上篇文章介绍了文件的缓存，这里我们介绍一下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