CacheQueryOptions が Chrome 54 で到着

ジェフ・ポスニック（Jeff Posnick）氏

Service Worker 内で、または window.caches を介してウェブアプリから直接 Cache Storage API を使用する場合は、朗報です。Chrome 54 以降では、CacheQueryOptions の全セットがサポートされるため、キャッシュに保存されているレスポンスを簡単に見つけることができます。

どのようなオプションを利用できますか？

次のオプションは、CacheStorage.match() または Cache.match() の呼び出しで設定できます。設定しない場合、すべてデフォルトで false（または cacheName の場合は undefined）になり、match() の 1 回の呼び出しで複数のオプションを使用できます。

ignoreSearch

これは、URL の「検索」部分（URL クエリ パラメータとも呼ばれます）を無視するようにマッチング アルゴリズムに指示します。これは、分析トラッキングなどに使用されるクエリ パラメータを含むソース URL があるが、キャッシュ内のリソースを一意に識別するという点では重要でない場合に便利です。たとえば、多くの人が次のような Service Worker の「gotcha」に陥っています。

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

ユーザーが直接 index.html に移動した場合、この種のコードは想定どおりに機能しますが、ウェブアプリで分析プロバイダを使用して外部からのリンクを追跡していて、ユーザーが index.html?utm_source=some-referral に移動した場合はどうすればよいでしょうか。デフォルトでは、index.html?utm_source=some-referral を caches.match() に渡しても index.html のエントリは返されません。ただし、ignoreSearch が true に設定されている場合は、設定されているクエリ パラメータに関係なく、キャッシュに保存されているレスポンスを取得できます。

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName は、複数のキャッシュがあり、レスポンスを特定の 1 つのキャッシュに保存する必要がある場合に便利です。この API を使用すると、（ブラウザはすべてのキャッシュではなく 1 つのキャッシュの中だけをチェックするため）、クエリの効率が向上します。また、複数のキャッシュでその URL がキーとして指定されている可能性がある場合に、特定の URL に対する特定のレスポンスを取得できます。Cache.match() はキャッシュされた単一の名前付きですでに動作しているため、cacheName は CacheStorage.match() と併用した場合のみ有効です。Cache.match() と併用することはできません。

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod、ignoreVary

ignoreMethod と ignoreVary は、ignoreSearch や cacheName よりもニッチですが、特定の目的を果たします。

ignoreMethod を使用すると、最初のパラメータとして method（POST、PUT など）を持つ Request オブジェクトを match() に渡すことができます。通常は、GET または HEAD リクエストのみが許可されます。

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

true に設定した場合、ignoreVary は、キャッシュに保存されたレスポンスに設定されている Vary ヘッダーに関係なく、キャッシュ ルックアップが行われることを意味します。Vary ヘッダーを使用するキャッシュ内のレスポンスを扱っていないことがわかっている場合は、このオプションを設定する必要はありません。

ブラウザ サポート

CacheQueryOptions は、Cache Storage API をサポートするブラウザにのみ関連します。Chrome と Chromium ベースのブラウザを除き、現在対応しているのは Firefox のみです。Firefox はすでに CacheQueryOptions をネイティブにサポートしています。

Chrome 54 より前のバージョンで CacheQueryOptions を使用するデベロッパーは、Arthur Stolyar 氏の厚意によりポリフィルをご利用いただけます。