Cache: add() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

add() は Cache インターフェイスのメソッドで、URL を受け取り、リソースを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。

add() メソッドは、機能的に次の例と同じです。

js
fetch(url).then((response) => {
  if (!response.ok) {
    throw new TypeError("bad response status");
  }
  return cache.put(url, response);
});

より複雑な操作では、 Cache.put() を直接使用する必要があります。

メモ: add() は、前にキャッシュに保存された、リクエストに一致するキー/値の組を上書きます。

構文

js
add(request)

引数

request

キャッシュに加えるリクエスト。 Request オブジェクトか URL を指定できる。

この引数は Request() コンストラクターの引数として使用されるので、 URL はそのコンストラクターと同じルールに従います。すなわち、URL はベース URL からの相対パスです。ベース URL は、ウィンドウコンテキストでは文書内の baseURI、ワーカーコンテキストでは WorkerGlobalScope.location が該当します。

返値

undefined で解決する Promise です。

例外

TypeError

URL スキームが http でも https でもない場合。

レスポンスステータスが 200 番台（つまり、成功レスポンス）ではありません。これはリクエストが成功を返さない場合や、リクエストがオリジン間の CORS ではないリクエスト (cross-origin no-cors request) の場合も発生します（この場合、ステータスが常に 0 と報告されます）。

例

このコードブロックは、InstallEvent が発行されるのを待ってから、アプリがインストールプロセスを処理するために、waitUntil を実行します。この処理は、新しいキャッシュを作成するための CacheStorage.open の呼び出しと、資産を追加するための Cache.add の使用で構成されています。

js
this.addEventListener("install", (event) => {
  event.waitUntil(caches.open("v1").then((cache) => cache.add("/index.html")));
});

仕様書

Specification
Service Workers
# cache-add

ブラウザーの互換性

BCD tables only load in the browser

関連情報