これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

ServiceWorker APICache インターフェースは、ServiceWorker ライフサイクルの一部としてキャッシュされた Request / Response のペアオブジェクトを表します。Cache インターフェースはWindowスコープやWorkerで利用できます。そのため、このAPIはservice workerスペックで定義されていますが、service workerに結びつけて使う必要はありません。

ひとつのオリジンが、複数の Cache オブジェクトを持つことができます。あなたはスクリプト(e.g. ServiceWorker スクリプト)が、Cache の更新処理をする方法を実装しなければなりません。明確なリクエストがない限り、Cache 内のアイテムは更新されません。つまり、 cache は削除されない限り有効期限切れにはなりません。CacheStorage.open(cacheName) を使用して特定の名前の Cache オブジェクトを得たのち、 Cache メソッドを呼び出すことでCache を操作します。

また、定期的に cache エントリーを一掃する必要があります。それぞれのブラウザには、service worker が使用するために与えられた cache ストレージの総量に厳しい制限が設けられています。キャッシュクオータの使用状況は StorageEstimate APIを利用して確認することができます。 ブラウザはディスクスペースの管理に最善を尽くしますが、あるオリジンのための Cache ストレージを削除してしまうかもしれません。一般的にブラウザは、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。キャッシュを名前をつかってバージョンわけし、各スクリプトはそのスクリプトに対応するバージョンのキャッシュのみを使用するようにしてください。詳細は、古いキャッシュを削除する を確認してください。

ノート: 初期の Cache 実装(Blink と Gecko)では、レスポンスボディが完全にストレージに書き込まれると、Cache.addCache.addAllCache.put promise を 解決していました。 より最近のバージョンの仕様では、 レスポンスボディがまだストリーミング中でも、エントリーがデータベースに書き込まれるとすぐにブラウザが promise を解決できる新しい言語を持っています。

 ノート:キーのマッチングアルゴリズムは、バリューの中にあるVARYヘッダに依存しています。そのため、新しいキーのマッチングはキャッシュにあるキーとバリューの両方が必要です。

ノート: このキャッシュAPIはHTTPのキャッシュヘッダーを利用しません。

メソッド

Cache.match(request, options)
Cache オブジェクトで最初に一致したリクエストと関連するレスポンスを解決する Promise を返す。
Cache.matchAll(request, options)
Cache オブジェクトでマッチするすべてのリクエスト配列を解決する Promise を返す。
Cache.add(request)
URL を受け取り、取得して、指定された cache に結果のレスポンスオブジェクトを追加する。機能的にはfetch() を呼び出してから cache に結果を追加するために Cache.put() を使用するのと同じである。
Cache.addAll(requests)
URL 配列を受け取り、それらを取得して指定された cache に結果のレスポンスオブジェクトを追加する。
Cache.put(request, response)
Takes both a request and its response and adds it to the given cache.
Cache.delete(request, options)
リクエストされたキーの Cache エントリーを探し、見つかった場合は  Cache エントリーを削除して、 true に解決する Promise を返す。Cache エントリーが見つからない場合、false を返す。
Cache.keys(request, options)
Cache キーの配列を解決する Promise を返す。

このコードスニペットは、service worker selective caching sample からのものです(selective caching live を見てください)。コードでは、 font/ で始まる Content-Type を持つ Cache を開くために、CacheStorage.open(cacheName) を使っています。

そして、 マッチする font が既に cache にあるかを確認するために、Cache.match(request, options) を使用し、見つかった場合はそれを返します。マッチする font がなかった場合、ネットワークから font を取得して、取得したリソースをキャッシュするために、Cache.put(request, response) を使っています。

また、fetch() 処理からスローされる例外をハンドルしています。HTTP エラーレスポンス(つまり、404)は例外をトリガしないことに注意してください。これは適切なエラーコードが設定されている通常のレスポンスオブジェクトを返します。

コードスニペットでは、 service worker で使われる cache のバージョン管理のベストプラクティスも示しています。この例では、1 つの cache しかありませんが、同じアプローチは複数の cache でも使えます。cache のショートハンド識別子として、特定のバージョン管理されたキャッシュ名をマップしています。また、 CURRENT_CACHES で指定されていないすべてのキャッシュを削除しています。

ノート: Chrome で chrome://inspect/#service-workers を訪ねて、 service-worker.js スクリプトが実行している様々なアクションのログを見るために、登録された service worker の下の "inspect" リンクをクリックしてください。
var CACHE_VERSION = 1;

//  特定のバージョン管理されたキャッシュ名としてマップされたショートハンド識別子。
var CURRENT_CACHES = {
  font: 'font-cache-v' + CACHE_VERSION
};

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  // アクティブ worker は、promise が正常に解決されるまでアクティブとして扱われない。
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            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;
        } 
      }).catch(function(error) {
        
        // match() か fetch() で発生する例外をハンドルする。
        console.error('  Error in fetch handler:', error);

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

仕様

仕様 状態 コメント
Service Workers
Cache の定義
草案 Initial definition.

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 40.0 39 (39) 未サポート 24 未サポート
add() 44.0 (有) ? ? ?
addAll() 46.0 (有) ? ? ?
matchAll() 46.0 (有) ? ? ?
add()addAll()、 と put() のために HTTPS を必要とする 46.0 (有) ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 未サポート 39.0 (39) ? 未サポート ? 未サポート 40.0
add() 未サポート 未サポート (有) ? ? ? ? 44.0
addAll() 未サポート 未サポート (有) ? ? ? ? 46.0
matchAll() 未サポート 未サポート (有) ? ? ? ? 46.0
add()addAll()、 と put() のために HTTPS を必要とする 未サポート 未サポート (有) ? ? ? ? 46.0

関連項目

ドキュメントのタグと貢献者

このページの貢献者: shimazu, Fajrovulpo, YuichiNukiyama
最終更新者: shimazu,