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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.