Cache: addAll() メソッド

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.

addAll() は Cache インターフェイスのメソッドで、URL の配列を受け取り、それらを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。取得の間に作成されたリクエストオブジェクトは、格納されるレスポンス操作のキーになります。

メモ: addAll() は、リクエストと一致する、以前にキャッシュに格納されたキーと値のペアをすべて上書きしますが、結果として生じる put() 操作が、同じ addAll() メソッドによって直前にキャッシュに格納された項目を上書きしようとすると失敗します。

構文

js
addAll(requests)

引数

requests

キャッシュに追加したいリソースのリクエストの配列です。 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 の呼び出しと、一連の資産を追加するための addAll() の使用で構成されています。

js
this.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});

仕様書

Specification
Service Workers
# cache-addAll

ブラウザーの互換性

BCD tables only load in the browser

関連情報