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);
})
Note: put() は、リクエストに一致する、以前にキャッシュに保存されたキーと値のペアを上書きします。
Note: Cache.add や Cache.addAll は、200 の範囲にない Response.status 値を持つレスポンスをキャッシュしませんが、Cache.put では、リクエストとレスポンスのペアを格納できます。 その結果、Cache.put では可能ですが、Cache.add や Cache.addAll は不透明なレスポンスを格納するために使用できません。
構文
cache.put(request, response).then(function() {
// リクエストとレスポンスのペアがキャッシュに追加されました
});
パラメーター
戻り値
undefined で解決する Promise。
Note: 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