我受命撰写这篇文章,介绍 Service Worker 缓存 API 的一项相当细微的更新。我认为它不值得单独写一篇文章,但经过长时间的争论,最终我们决定来一场剪刀石头布游戏,结果我输了,所以就写了这篇文章。
准备好了解 Chrome 对服务工件缓存 API 实现的更新了吗?
我听不到您的声音!我说,您准备好了解 Chrome 对 Service Worker 缓存 API 实现的更新了吗?
(只有在您跳上椅子并大喊“YEAHHH!”后,才能继续阅读。同时假装挥舞套索是可选的,但我们鼓励您这样做)。
cache.addAll 已在 Chrome 46 中推出
是的!没错!缓存!Dot add all! Chrome 46!
好吧,开玩笑归开玩笑,这实际上是一件大事,因为 cache.addAll
是缓存“必需”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 中,但您也可以通过网页完全访问 caches 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
- 忽略缓存响应中的 vary 标头
Firefox 已经在其… 好了,您已经知道该怎么做了。去告诉 Ben Kelly,他将所有这些功能集成到 Firefox 中,真是太棒了。
如果您想了解 Chrome 如何实现缓存查询选项,请参阅 crbug.com/426309。
下次再见,我们将继续探讨“我们在缓存 API 中实现了什么”这一精彩主题!