Cache: put() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.
put() は Cache インターフェイスのメソッドで、キーと値のペアを現在の Cache オブジェクトに追加することができます。
多くの場合、やりたいことは、ただ 1 つ以上のリクエストを fetch() して、その結果を直接キャッシュに追加するだけです。そのような場合は、Cache.add() や Cache.addAll() を使用した方がよいでしょう。 これらはこうした操作を 1 つ以上行うための一括操作関数であるためです。
fetch(url).then((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.add や Cache.addAll は不透明なレスポンスを格納するために使用できませんが、 Cache.put では可能です。
構文
put(request, response) 引数
返値
undefined で解決する Promise です。
例外
TypeError-
URL スキームが
httpまたはhttpsのどちらでもない場合に返されます。
例
この例は、MDN の simple-service-worker の例からのものです（simple-service-worker をライブで見る）。 ここでは、FetchEvent が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。
CacheStorage.match()を使用して、リクエストの一致がCacheStorageにあるかどうかを確認します。 もしそうなら、それを提供します。- そうでない場合は、
v1キャッシュをopen()で開き、Cache.put()を使用して既定のネットワークリクエストをキャッシュに入れ、return response.clone()を使用して既定のネットワークリクエストのクローンを返します。put()がレスポンスの本体を消費するため、クローンが必要です。 - これが失敗した場合（ネットワークがダウンしているなど）、代替レスポンスを返します。
let response; const cachedResponse = caches .match(event.request) .catch(() => fetch(event.request)) .then((r) => { response = r; caches.open("v1").then((cache) => { cache.put(event.request, response); }); return response.clone(); }) .catch(() => caches.match("/gallery/myLittleVader.jpg")); 仕様書
| Specification |
|---|
| Service Workers Nightly # cache-put |