CacheStorage 浏览器缓存

特点：
	.Cache Stroage只能缓存静态资源，所以它只能缓存用户的 GET 请求
	.Cache Stroage中的缓存不会过期，但是浏览器对它的大小是有限制的，所以需要我们定期进行清理
	.CacheStorage 总是对不受信任的源（即那些不使用HTTPS)使用 SecurityError reject. 
		.在Firefox Devtools选项/齿轮菜单中通过选中"通过HTTP启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。

基本使用
	1、CacheStorage
		.提供了一个 ServiceWorker 、其它类型worker或者 window 范围内可以访问到的所有命名cache的主目录	
		.CacheStorage通过全局变量caches来表示
		
		(1)打开对应的CacheStorage
			caches.open(cacheName)
			.接口 open() 方法返回一个resolve为匹配 cacheName 的 Cache 对象的 Promise
			.如果没有则会以cacheName创建一个
			.返回一个Pomise,传递一个对应的cache对象来操作对应的CatchStorage
			
			var cachedResponse = caches.match(event.request,options)
			.catch(function() {
			  return fetch(event.request);
			}).then(function(response) {
			  caches.open('v1').then(function(cache) {
			    cache.put(event.request, response);
			  });
			  return response.clone();
			}).catch(function() {
			  return caches.match('/sw-test/gallery/myLittleVader.jpg');
			});
			
			可选options:
				ignoreSearch: Boolean (en-US)值， 指定匹配过程是否应该忽略url中查询参数。举个例子，如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。
				ignoreMethod:  Boolean (en-US) 值，当被设置为 true 时，将会阻止在匹配操作中对 Request请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.
				ignoreVary:  Boolean (en-US) 值，当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 Response 对象，无论请求的 VARY  头存在或者没有。该参数默认为 false.
				cacheName:  DOMString 值， 表示所要搜索的缓存名称
			
		(2)匹配对应的CacheStorage
			caches.match(Request对象或url字符串).then(存储内容=>{
				...
			})
			
			caches.match(event.request).then(function(response) {
			  return response || fetch(event.request).then(function(r) {
			    caches.open('v1').then(function(cache) {
			      cache.put(event.request, r);
			    });
			    return r.clone();
			  });
			}).catch(function() {
			  return caches.match('/sw-test/gallery/myLittleVader.jpg');
			});
			
		(3)返回CacheStorage存储的所有key
			这里是service worker中的监听函数
			this.addEventListener('activate', function(event) {
			  var cacheWhitelist = ['v2'];
			
			  event.waitUntil(
			    caches.keys().then(function(keyList) {
			      return Promise.all(keyList.map(function(key) {
			        if (cacheWhitelist.indexOf(key) === -1) {
			          return caches.delete(key);
			        }
			      });
			    })
			  );
			});
		
		(4)判断key是否存在
			caches.has(cacheName).then(function(boolean) {
			 	true: 缓存存在
			});
		
		(5)删除缓存
			caches.delete(cacheName).then(function(boolean) {
			  ...
			});

		
	2、cache对象
		(1)添加任意缓存
			cache.put(request或url,response)
			.允许存储任何请求/响应对
			.将覆盖先前存储在匹配请求的cache中的任何键/值对
		
			request,response可通过service worker的fetch监听函数event.request、或fetch中的Requset、Response对象获取
			request可以是Request对象，也可以是一个url
	
	 	(2)添加缓存
	 		cahce.add(Request对象或url)
	 		.不会缓存 Response.status 值不在200范围内的响应
	 		cache.add(request).then(function() {
			  request has been added to the cache
			});

			
			等价于：
			fetch(url).then(function (response) {
			  if (!response.ok) {
			    throw new TypeError('bad response status');
			  }
			  return cache.put(url, response);
			})
		
		(4)批量添加缓存
			cache.addAll(requests[]或url[]).then(function() {
			  requests have been added to the cache
			});

			.不会缓存 Response.status 值不在200范围内的响应
		
		(5)删除缓存
			cache.delete(request或url,{options}).then(function(boolean) {
				...
			});
			
			可选options:
				ignoreSearch: Boolean (en-US)值， 指定匹配过程是否应该忽略url中查询参数。举个例子，如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。
				ignoreMethod:  Boolean (en-US) 值，当被设置为 true 时，将会阻止在匹配操作中对 Request请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.
				ignoreVary:  Boolean (en-US) 值，当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 Response 对象，无论请求的 VARY  头存在或者没有。该参数默认为 false.
				cacheName:  DOMString 值， 表示所要搜索的缓存名称

		(6)返回所有的key
			.具有相同URL但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。
			
			cache.keys(request或url,options).then(function(keys) {
			  do something with your array of requests
			});
		
		(7)匹配对应的缓存
			.只解析为 response[0] （第一个匹配的响应(response)对象）
			
			cache.match(request或url,options).then(function(response) {
			  操作response
			});
		
		(8)匹配对应的缓存数组
			cache.matchAll(request或url,options).then(function(response) {
			  do something with the response array
			});