Progressive Web Apps(PWA)核心技术-使用Cache API
上篇文章介绍了文件的缓存,这里我们介绍一下Cache API的属性和方法。检查浏览器是否支持Cache APIif('caches' in window){//支持}创建缓存caches.open('example-cache').then(function(cache) {//创建一个名为example-cache的缓存并返回一个cache对象...
上篇文章介绍了文件的缓存,这里我们介绍一下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
更多推荐
所有评论(0)