我受邀撰写这篇博文，介绍对 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 中实现了什么，期待您的参与！