我被要求撰寫這篇文章，說明服務工作者快取 API 的微幅更新。我認為這不值得寫成文章，但經過一番長時間的爭論，最後以猜拳遊戲決定勝負，而我輸了，所以就寫這篇文章吧。
您準備好瞭解 Chrome 實作服務工作者快取 API 的更新內容了嗎？
我聽不清楚！我說，你是否準備好瞭解 Chrome 實作服務工作者快取 API 的更新內容？
(請先跳上椅子，大喊「YEAHHH！」，然後再繼續閱讀本文。同時假裝揮舞套索並非必要，但我們鼓勵你這麼做)。
cache.addAll 已在 Chrome 46 推出
當然可以！答對了！快取！點選「全部新增」！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 中，但網頁也可以完全存取快取 API。
Firefox 在開發人員版本中已支援這個 API，因此會在其服務工作者導入後一併推出。
不過，這還不是全部，我們還在開發更多快取改善功能。
cache.matchAll 即將在 Chrome 47 推出
這樣一來，您就能取得多個相符項目：
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
上述指令會取得 mysite-static-v1 中與 / 相符的所有項目。如果網址可獨立快取 (例如具有不同的 Vary 標頭)，快取可讓每個網址有多個項目。
Firefox 的開發人員版本已支援這項功能，因此服務工作者實作功能的其他部分也會支援。
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 中實作了什麼」！