CacheQueryOptions が Chrome 54 で到着

Jeff Posnick

サービス ワーカー内または window.caches を介してウェブアプリから直接 Cache Storage API を使用している場合は、Chrome 54 以降、CacheQueryOptions の全セットがサポートされるため、必要なキャッシュに保存されたレスポンスを簡単に見つけられるようになります。

どのようなオプションがありますか？

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

ignoreSearch

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

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 は、複数のキャッシュがあり、特定のキャッシュに保存されているレスポンスを取得する必要がある場合に便利です。この API を使用すると、（ブラウザでキャッシュ全体ではなく 1 つのキャッシュ内でチェックすれば済むため）クエリの効率が向上します。また、複数のキャッシュで URL がキーとして使用されている可能性がある場合でも、特定の URL に対する特定のレスポンスを取得できます。Cache.match() はすでに名前付きのキャッシュに保存されているため、cacheName は Cache.match() ではなく CacheStorage.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 をネイティブにサポートしています。

54 より前のバージョンの Chrome で CacheQueryOptions を使用したい場合は、Arthur Stolyar 提供のポリフィルをご利用いただけます。