我受邀撰写这篇博文,介绍对 Service Worker Cache API 的一个相当小的更新。我觉得这本书没有理由写成一本书,但经过一场漫长的辩论,最终演变成一场石头剪刀布游戏,后来我输了,所以就在这里。
您准备好了解 Chrome Service Worker Cache API 实现方面的最新动态了吗?
我听不到你的声音!我说,您准备好了解 Chrome 的 Service Worker Cache API 实现方面的更新了吗?
。
cache.addAll 现已登陆 Chrome 46
是的!完全正确!缓存!全部加点!Chrome 46!
好的,讽刺一下,这实际上很重要,因为 cache.addAll
是缓存“必需品”polyfill 的最后一部分,这意味着不再需要 polyfill。
cache.addAll
的运作方式如下:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll
接受一个网址和请求数组,提取它们并将其添加到缓存。这是事务性的 - 如果任何提取或写入失败,整个操作都将失败,并且缓存将恢复到之前的状态。这对于上述安装操作特别有用,其中一次失败应该是整体失败。
以上示例位于 Service Worker 内,但缓存 API 也可以完全从页面访问。
Firefox 在其开发者版中已经支持此 API,因此,它将随 Service Worker 的其余部分一起发布。
但是,还不止这些,流水线中还有更多缓存改进...
Chrome 47 即将推出 cache.matchAll 功能
这样,您就可以获得多个匹配项:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
以上转换将获取 mysite-static-v1
中与 /
匹配的所有内容。借助缓存,您可以为每个网址创建多个可单独缓存的条目,例如,如果它们具有不同的 Vary
标头。
Firefox 在其开发者版中已经支持此功能,因此,它将随 Service Worker 的其余部分一起实现。
Chrome 即将推出缓存查询选项...
下面是一个非常标准的提取处理程序:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
如果我们缓存了 /
,并且收到了 /
的请求,则系统将从缓存中提供该请求。不过,如果我们收到的 /?utm_source=blahblahwhatever
请求并非来自缓存,若要解决此问题,您可以在匹配时忽略网址搜索字符串:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
现在,/?utm_source=blahblahwhatever
将与 /
的条目匹配!完整选项如下:
ignoreSearch
- 在请求参数和缓存请求中忽略网址的搜索部分ignoreMethod
- 忽略请求参数的方法,因此 POST 请求可以匹配缓存中的 GET 条目ignoreVary
- 忽略缓存响应中的不同标头
Firefox 已经支持此功能...好吧,你现在已经知道练习了。请让 Ben Kelly 知道他能在 Firefox 中实现所有这些功能真是太棒了。
如果您想遵循 Chrome 缓存查询选项的实现,请访问 crbug.com/426309。
我们下次在 Cache API 中实现了什么,期待您的参与!