'my-cache'の名前でcacheを生成し、'sample.json' へリクエストした際に返ってくるResponseオブジェクトをキャッシュするデモ
リクエストした際のレスポンスを保存、取得するためのもの。ブラウザに組み込まれているAPI。
最新の全モダンブラウザで利用可能。
Service Workerからもアクセス可能。
const cacheAvailable = 'caches' in self;
RequestオブジェクトとResponseオブジェクトのペアだけが格納される。
保存可能な容量は、ブラウザによって様々で、少なくとも数百MB、場合によっては数百GB以上を保存可能。
const cache = await caches.open('my-cache');
cache.addcache.add()の受け取るパラメータは、Requestか
stringのURLかのみ。
リクエスト時のfetchが失敗したり、レスポンスのステータスコードが200系以外の場合は保存されず、Promiseは拒否される。
CORSモードになっていないクロスオリジンリクエストは、status 0 を返すため、保存できない。
// Retreive sample.json from the server and store the response.
cache.add(new Request('sample.json'));
// Retreive sample.json from the server and store the response.
cache.add('sample.json');
cache.addAllcache.add()との違いは、Requestオブジェクト、またはstring型のURLの配列を受け取る点。
キャッシュされないリクエストが1つでもあれば、Promiseは拒否される。
const urls = ['sample.json', './data.json'];
cache.addAll(urls);
cache.putレスポンスを保存するか、独自のResponseを作成して保存可能。
パラメータの1つ目は、Requestオブジェクトかstring型のURL。
パラメータの2つ目は、ネットワーク上から受け取ったResponseか、コードによって生成されたレスポンス。
cache.put()はcache.add()やcache.addAll()よりも許容度が高い。CORS以外のレスポンス、またはレスポンスのステータスコードが200系以外のレスポンスも保存することが可能。
// Retrieve sample.json from the server and store the response.
cache.put('sample.json');
// Create a new entry for sample.json and store the newly created response.
cache.put('sample.json', new Response('{"foo": "bar"}'));
// Retrieve sample.json from the 3rd party site and store the response.
cache.put('https://example.com/sample.json');
cache.match()メソッドを使用。
キャッシュされたリクエストのうち、一致するものが複数ある場合は、最初に作成されたリクエストが返される。
一致するすべてのレスポンスを取得する場合は、cache.matchAll()を使用
const response = await cache.match(request);
全てのキャッシュのエントリをループし、必要なエントリに絞り込む。
// .png で終わる URL を持つすべてのアイテムを検索する場合
async function findImages() {
// Get a list of all of the caches for this origin
const cacheNames = await caches.keys();
const result = [];
for (const name of cacheNames) {
// Open the cache
const cache = await caches.open(name);
// Get a list of entries. Each item is a Request object
for (const request of await cache.keys()) {
// If the request URL matches, add the response to the result
if (request.url.endsWith('.png')) {
result.push(await cache.match(request));
}
}
}
return result;
}
上記の形式の場合、大量のデータセットを検索する場合は、処理速度が遅くなるので注意。
検索可能なエントリのインデックスを、IndexedDBに格納して検索する手段もあり。RequestのURLを検索可能なプロパティと一緒に保存すると、検索後に正しいキャッシュエントリを簡単に取得可能。
cache.delete()の第1引数は、Requestオブジェクト、またはstring型のURL。
cache.delete(request);
第2引数に指定するoptionsオブジェクトで、同じURLに対して複数のRequest/Responseペアを削除することが可能。
cache.delete('sample.json', {ignoreVary: true, ignoreSearch: true});
キャッシュが存在して削除された場合は、trueでPromiseが解決される。
await caches.delete('my-cache')