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 氏の厚意によりポリフィルをご利用いただけます。