Cache.put()
Cache
インターフェイスの put()
メソッドを使用すると、キーと値のペアを現在の Cache
オブジェクトに追加できます。
多くの場合、1つ以上のリクエストを fetch()
して、その結果を直接キャッシュに追加したいだけです。 そのような場合、Cache.add()
や Cache.addAll()
を使用する方がよいでしょう。 これらは、1つ以上のそれらの操作の一括指定関数であるためです。
fetch(url).then(function(response) {
if (!response.ok) {
throw new TypeError('Bad response status');
}
return cache.put(url, response);
})
注: put()
は、リクエストに一致する、以前にキャッシュに保存されたキーと値のペアを上書きします。
注: Cache.add
や Cache.addAll
は、200 の範囲にない Response.status
値を持つレスポンスをキャッシュしませんが、Cache.put
では、リクエストとレスポンスのペアを格納できます。 その結果、Cache.put
では可能ですが、Cache.add
や Cache.addAll
は不透明なレスポンスを格納するために使用できません。
構文
cache.put(request, response).then(function() { // リクエストとレスポンスのペアがキャッシュに追加されました });
パラメーター
戻り値
undefined
で解決する Promise
。
注: URL スキームが http
または https
でない場合、Promise は TypeError
で拒否します。
例
この例は、MDN の sw-test の例からのものです(sw-test をライブで見る)。 ここでは、FetchEvent
が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。
CacheStorage.match()
を使用して、リクエストの一致がCacheStorage
にあるかどうかを確認します。 もしそうなら、それを提供します。- そうでない場合は、
open()
を使用してv1
キャッシュを開き、Cache.put()
を使用してデフォルトのネットワークリクエストをキャッシュに入れ、return response.clone()
を使用してデフォルトのネットワークリクエストのクローンを返します。put()
がレスポンスのボディを消費するため、クローンが必要です。 - これが失敗した場合(ネットワークがダウンしているなど)、フォールバックレスポンスを返します。
var response;
var cachedResponse = caches.match(event.request).catch(function() {
return fetch(event.request);
}).then(function(r) {
response = r;
caches.open('v1').then(function(cache) {
cache.put(event.request, response);
});
return response.clone();
}).catch(function() {
return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Service Workers Cache: put の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser