Cache: put() メソッド

put() は Cache インターフェイスのメソッドで、キーと値のペアを現在の Cache オブジェクトに追加することができます。

多くの場合、やりたいことは、ただ 1 つ以上のリクエストを fetch() して、その結果を直接キャッシュに追加するだけです。そのような場合は、Cache.add() や Cache.addAll() を使用した方がよいでしょう。 これらはこうした操作を 1 つ以上行うための一括操作関数であるためです。

js
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 では可能です。

構文

js
put(request, response)

引数

request

キャッシュに追加する Request オブジェクトまたは URL。

response

リクエストと合う Response。

返値

undefined で解決する Promise です。

例外

TypeError

URL スキームが http または https のどちらでもない場合に返されます。

例

この例は、MDN の simple-service-worker の例からのものです（simple-service-worker をライブで見る）。 ここでは、FetchEvent が発生するのを待ちます。 次のようなカスタムレスポンスを作成します。

  1. CacheStorage.match() を使用して、リクエストの一致が CacheStorage にあるかどうかを確認します。 もしそうなら、それを提供します。
  2. そうでない場合は、v1 キャッシュを open() で開き、Cache.put() を使用して既定のネットワークリクエストをキャッシュに入れ、 return response.clone() を使用して既定のネットワークリクエストのクローンを返します。 put() がレスポンスの本体を消費するため、クローンが必要です。
  3. これが失敗した場合（ネットワークがダウンしているなど）、代替レスポンスを返します。
js
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
# cache-put

ブラウザーの互換性

BCD tables only load in the browser

関連情報