Cache

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

ServiceWorker APICache インターフェースは、ServiceWorker ライフサイクルの一部としてキャッシュされた Request / Response のペアオブジェクトを表します。

ドメインは、コンテンツが service workers のコントロール下にある複数の名前付き Cache オブジェクトを持てます。

ServiceWorker スクリプトが、Cache の更新処理をする方法を実装する必要があります。明確なリクエストがない限り、Cache 内のアイテムは更新されません; cache は削除されない限り有効期限切れになりません。特定の名づけられた Cache オブジェクトと接続するために CacheStorage.open(cacheName) を使用してから、 Cache をメンテナンスするためにいずれかの Cache メソッドを呼び出します。

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

ノート: Cache インターフェースは、window スコープだけでなく、worker にも公開されます。service workers と一緒に使わないようにしてください。

ノートCache.put と、Cache.addCache.addAll は、 GET リクエストのみ cache に保存できます。

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

ノート: Chrome 46 のように、Cache API はセキュアオリジンからのリクエストのみ保存できます。これは、 HTTPS で提供されることを意味します。

メソッド

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.

ブラウザ実装状況

機能 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

関連項目

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

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