MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Cache.add()

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

Cache インターフェースの add() メソッドは、URL を受け取り、取得して、指定された cache に結果のレスポンスオブジェクトを追加します。add() メソッドは、 機能的に次の例と同じです。

fetch(url).then(function (response) {
  return cache.put(url, response);
})

より複雑な操作では、Cache.put() を直接使用する必要があります。

ノート: add() は、リクエストにマッチする、前に cache に保存された key/value ペアを上書きます。

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

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

構文

cache.add(request).then(function() {
  //リクエストはすでに cahce に追加されている。
});

パラメータ

request
cache に加えるリクエスト。Request オブジェクトか URL を指定できる。

戻り値

void で解決する Promise

ノート: URL スキーマが http か https ではない場合、promise は TypeError で拒否する。

このコードブロックは、InstallEvent が発火するのを待ってから、アプリにインストールプロセスを処理するために、waitUntil を実行します。この処理は、新しい cache を作成するための CacheStorage.open の呼び出しと、資産を追加するための Cache.add の使用で構成されています。

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.add('/sw-test/index.html');
    })
  );
});

仕様

仕様 状態 コメント
Service Workers
The definition of 'Cache' in that specification.
草案 Initial definition.

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 44.0 (有) 未サポート 24 未サポート
HTTPS を必要とする 46.0 (有) ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 未サポート (有) ? 未サポート ? 未サポート 44.0
HTTPS を必要とする 未サポート 未サポート (有) ? ? ? ? 46.0

関連項目

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

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