この投稿は、Service Worker Cache API の軽微なアップデートについて書くよう依頼されました。独自の記事が妥当だとは思いませんでしたが、長い議論の末、じゃんけんのゲームに行きつきました。今回は負けました。
Chrome の Service Worker Cache API の実装に関する最新情報をお届けします。
よく聞こえないよ。先ほどお伝えした、Chrome の Service Worker Cache API の実装に関する最新情報をお届けします。
（椅子に飛び乗って「イエーイ！」と叫んだ場合にのみ読むことができます。それと同時に投げ縄をスイングするふりをするのも自由ですが、おすすめです）。
cache.addAll が Chrome 46 で利用可能に
オーバープロビジョニングと正解です。キャッシュ！すべて追加してください。Chrome 46
皮肉はさておき、cache.addAll はキャッシュの「必須事項」のポリフィルの最後の部分であり、不要になったため、これは実際には非常に大事なことです。
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 は、URL とリクエストの配列を取得して取得し、キャッシュに追加します。これはトランザクションです。フェッチまたは書き込みのいずれかが失敗した場合、オペレーション全体が失敗し、キャッシュは以前の状態に戻ります。これは、1 つの障害が全体的な 1 つの障害になるような、このようなインストール操作で特に有用です。
上記の例は Service Worker 内にありますが、Caches API はページからも完全にアクセスできます。
Firefox のデベロッパー エディションでこの API がすでにサポートされているため、Service Worker の残りの部分と一緒に実装されます。
それだけではありません。パイプラインにはさらに多くのキャッシュ改善があります。
cache.matchAll のリリース（Chrome 47）
これにより、複数の一致を取得できます。
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
上記のように指定すると、/ に一致する mysite-static-v1 内のすべてが取得されます。Vary ヘッダーが異なる場合など、エントリを個別にキャッシュに保存できる場合は、URL ごとに複数のエントリを保持できます。
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 のリクエストを受け取った場合は、キャッシュから取得されません。この問題を回避するには、マッチングの際に URL 検索文字列を無視します。
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- リクエストの引数とキャッシュに保存されたリクエストの両方で URL の検索部分を無視します。ignoreMethod- POST リクエストがキャッシュ内の GET エントリと一致するように、リクエスト引数のメソッドを無視します。ignoreVary- キャッシュに保存されたレスポンスの vari ヘッダーを無視します。
Firefox はすでにサポートしています。ご存じのとおり、Firefox でこれらの作業を完了できるようになったことを Ben Kelly に伝えましょう。
キャッシュ クエリ オプションの Chrome 実装を確認するには、crbug.com/426309 をご覧ください。
次回の記事では「キャッシュ API で実装した内容」をご紹介します。