Cache

Cache インターフェイスはキャッシュされた Request / Response オブジェクトの組み合わせのためのストレージの仕組みを提供します。例えば、 ServiceWorker のライフサイクルの一部として使用されます。なお、 Cache インターフェイスは Worker だけでなくウィンドウスコープにも公開されています。サービスワーカーの仕様書で定義されているものですが、必ずしもサービスワーカーとの組み合わせで使用する必要はありません。

単一のオリジンが、名前が付いた複数の Cache オブジェクトを持つことができます。 (例えば ServiceWorker の中などで) スクリプトがどのように Cache を更新するかを実装する必要があります。 Cache 内のアイテムは、明確にリクエストされない限り更新されません。削除されない限り無効にはなりません。 CacheStorage.open() を使用して特定の名前付き Cache オブジェクトを開き、それから任意の Cache のメソッドを呼び出して Cache を管理します。

また、定期的にキャッシュエントリを一掃する必要があります。各ブラウザーは、指定されたオリジンが利用することができるキャッシュストレージの総量に厳しい制限を設けています。キャッシュ容量の概算の使用量は StorageEstimate API を用いて確認することができます。ブラウザーはディスク容量の管理に最善を尽くしますが、あるオリジンのキャッシュストレージを削除することがあります。ブラウザーはふつう、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。名前を用いてキャッシュをバージョン管理し、安全に操作できる版のスクリプトによるキャッシュのみを使用するようにしてください。詳細は、古いキャッシュの削除を確認してください。

メモ: 初期の Cache の実装 (Blink と Gecko) では、 Cache.add(), Cache.addAll(), Cache.put() の Promise が、レスポンスの本文がストレージに完全に書き込まれたときに解決していました。より新しい版の仕様書では、レスポンスの本文がまだストリーミング中でも、エントリがデータベースに書き込まれると、ブラウザーはすぐに Promise を解決することができる仕様になっています。

メモ: キーの比較アルゴリズムは、値の中にある VARY ヘッダーに依存しています。そのため、新しいキーの比較はキャッシュにあるキーと値の両方が必要です。

メモ: キャッシュ API は HTTP のキャッシュヘッダーを尊重しません。

メソッド

Cache.match(request, options)
Cache オブジェクトで最初に一致したリクエストと関連するレスポンスで解決する Promise を返します。
Cache.matchAll(request, options)
Cache オブジェクトで一致するすべてのリクエストの配列で解決する Promise を返します。
Cache.add(request)
URL を受け取り、そこから取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。機能的には fetch() を呼び出してから、 put() を使用してキャッシュに結果を追加するのと同等です。
Cache.addAll(requests)
URL の配列を受け取り、それらを取得して指定されたキャッシュに結果のレスポンスオブジェクトを追加します。
Cache.put(request, response)
リクエストとレスポンスの両方を取り、指定されたキャッシュへ追加します。
Cache.delete(request, options)
リクエストされたキーの Cache エントリを探し、見つかった場合は Cache エントリを削除して、 true で解決する Promise を返します。 Cache エントリが見つからない場合、 false を返します。
Cache.keys(request, options)
Cache キーの配列を解決する Promise を返す。

このコードスニペットは、service worker selective caching sample からのものです (selective caching live を見てください)。このコードでは CacheStorage.open() を使用して、 Cache オブジェクトのうち Content-Type ヘッダーが font/ で始まるものを開きます。

そしてこのコードは、 Cache.match() を使用してすでにキャッシュ内に一致するフォントがあるかどうかを確認し、もしあれば、それを返します。一致するフォントがなかった場合は、コードはネットワークからフォントを取得して、 Cache.put() を用いて取得したリソースをキャッシュします。

このコードは fetch() の操作で発生する例外を処理します。なお、 HTTP のエラーレスポンス (404 など) はこの例外を発生させません。適切なエラーコードを持つ通常のレスポンスオブジェクトを返します。

このコードスニペットでは、サービスワーカーで使用されるバージョン付きキャッシュのベストプラクティスも示しています。この例ではキャッシュが1つしかありませんが、キャッシュが複数でも同じアプローチが利用できます。これはキャッシュの短縮識別子を、具体的なバージョン付けされたキャッシュ名に対応させます。このコードはまた、 CURRENT_CACHES という名前を持たないキャッシュをすべて削除します。

このコード例において、 "caches" はサービスワーカーの WorkerGlobalScope の属性です。これは CacheStorage オブジェクトを保持し、 CacheStorage インターフェイスでアクセスすることができます。

メモ: Chrome では、 chrome://inspect/#service-workers にアクセスして、登録されたサービスワーカーの下の "inspect" リンクをクリックすると、 service-worker.js スクリプトが行う様々なアクションのログ状態を見ることができます。
var CACHE_VERSION = 1;

// 特定のバージョン付きキャッシュに対応付けられた短縮識別子。
var CURRENT_CACHES = {
  font: 'font-cache-v' + CACHE_VERSION
};

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.values(CURRENT_CACHES);

  // アクティブなワーカーは、 Promise が正常に解決されるまで
  // アクティブとして扱われない。
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!expectedCacheNames.includes(cacheName)) {
            console.log('Deleting out of date cache:', cacheName);
            
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    
    // 'font' で始まる Cache オブジェクトを開く。
    caches.open(CURRENT_CACHES['font']).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log('Found response in cache:', response);

          return response;
        }

        console.log('Fetching request from the network');

        return fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());

          return networkResponse;
        });
      }).catch(function(error) {
        
        // match() や fetch() で発生する例外を処理する。
        console.error('Error in fetch handler:', error);

        throw error;
      });
    })
  );
});

クッキーのキャッシュへの格納

Fetch API では Set-Cookie ヘッダーを、 Response オブジェクトを fetch() から返す前に削除する必要があります。したがって、キャッシュに含まれる Response はヘッダーを含みません。

仕様書

仕様書 状態 備考
Service Workers
Cache の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Cache
実験的
Chrome 完全対応 43
補足
完全対応 43
補足
補足 From 40 to 42, this was only available on service workers.
Edge 完全対応 ありFirefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 30
補足
完全対応 30
補足
補足 From 27 to 29, this was only available on service workers.
Safari 完全対応 11WebView Android 完全対応 43
補足
完全対応 43
補足
補足 From 40 to 42, this was only available on service workers.
Chrome Android 完全対応 43
補足
完全対応 43
補足
補足 From 40 to 42, this was only available on service workers.
Firefox Android 完全対応 39Opera Android 完全対応 30
補足
完全対応 30
補足
補足 From 27 to 29, this was only available on service workers.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
補足
完全対応 4.0
補足
補足 From 40 to 42, this was only available on service workers.
add
実験的
Chrome 完全対応 44
補足
完全対応 44
補足
補足 Requires HTTPS from version 46.
Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 31
補足
完全対応 31
補足
補足 Requires HTTPS from version 33.
Safari 完全対応 11WebView Android 完全対応 44
補足
完全対応 44
補足
補足 Requires HTTPS from version 46.
Chrome Android 完全対応 44
補足
完全対応 44
補足
補足 Requires HTTPS from version 46.
Firefox Android 完全対応 39Opera Android 完全対応 32
補足
完全対応 32
補足
補足 Requires HTTPS from version 33.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
補足
完全対応 4.0
補足
補足 Requires HTTPS from Samsung Internet 5.0.
addAll
実験的
Chrome 完全対応 46
補足
完全対応 46
補足
補足 Requires HTTPS.
Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 33
補足
完全対応 33
補足
補足 Requires HTTPS.
Safari 完全対応 11WebView Android 完全対応 46
補足
完全対応 46
補足
補足 Requires HTTPS.
Chrome Android 完全対応 46
補足
完全対応 46
補足
補足 Requires HTTPS.
Firefox Android 完全対応 39Opera Android 完全対応 33
補足
完全対応 33
補足
補足 Requires HTTPS.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
補足
完全対応 5.0
補足
補足 Requires HTTPS.
delete
実験的
Chrome 完全対応 43Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 30Safari 完全対応 11WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 39Opera Android 完全対応 30Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
keys
実験的
Chrome 完全対応 43Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 30Safari 完全対応 11WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 39Opera Android 完全対応 30Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
match
実験的
Chrome 完全対応 43Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 30Safari 完全対応 11WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 39Opera Android 完全対応 30Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
matchAll
実験的
Chrome 完全対応 47Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 34
補足
完全対応 34
補足
補足 Requires HTTPS.
Safari 完全対応 11WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 39Opera Android 完全対応 34Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
put
実験的
Chrome 完全対応 43
補足
完全対応 43
補足
補足 Requires HTTPS from version 46.
Edge 完全対応 16Firefox 完全対応 39
補足
完全対応 39
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 30
補足
完全対応 30
補足
補足 Requires HTTPS from version 33.
Safari 完全対応 11WebView Android 完全対応 43
補足
完全対応 43
補足
補足 Requires HTTPS from version 46.
Chrome Android 完全対応 43
補足
完全対応 43
補足
補足 Requires HTTPS from version 46.
Firefox Android 完全対応 39Opera Android 完全対応 30
補足
完全対応 30
補足
補足 Requires HTTPS from version 33.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
補足
完全対応 4.0
補足
補足 Requires HTTPS from Samsung Internet 5.0.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報