Request: cache プロパティ

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年1月⁩.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

cache は Request インターフェイスの読み取り専用プロパティで、リクエストのキャッシュモードを保持します。リクエストがブラウザーの HTTP キャッシュとどのように作用するかを制御します。

値

RequestCache 値です。使用可能な値は次のとおりです。

default — ブラウザーは、 HTTP キャッシュで一致するリクエストを探します。
- 一致したものが新しい場合、キャッシュから返されます。
- 一致したものが古い場合、ブラウザーはリモートサーバーに条件付きリクエストを送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。
- 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。
no-store — ブラウザーは、最初にキャッシュを調べずにリモートサーバーからリソースを読み取りし、ダウンロードしたリソースでキャッシュを更新しません。
reload — ブラウザーは、最初にキャッシュを調べずにリモートサーバーからリソースを読み取りし、ダウンロードしたリソースでキャッシュを更新します。
no-cache — ブラウザーは、 HTTP キャッシュで一致するリクエストを探します。
- 一致するものが新しいか古いかに関わらず、ブラウザーはリモートサーバーに条件付きリクエストを送信します。リソースが変更されていないことをサーバーが示した場合、そのリソースはキャッシュから返されます。それ以外の場合、リソースはサーバーからダウンロードされ、キャッシュが更新されます。
- 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。
force-cache — ブラウザーは、 HTTP キャッシュで一致するリクエストを探します。
- 一致するものが新しいか古いかに関わらず、キャッシュから返されます。
- 一致するものがない場合、ブラウザーは通常のリクエストを行い、ダウンロードしたリソースでキャッシュを更新します。
only-if-cached — ブラウザーは、 HTTP キャッシュで一致するリクエストを探します。 Experimental
- 一致するものが新しいか古いかに関わらず、キャッシュから返されます。
- 一致するものがない場合、ブラウザーは 504 Gateway timeout ステータスで応答します。
"only-if-cached" モードは、リクエストの mode が "same-origin" の場合にのみ使用できます。リクエストの redirect プロパティが "follow" であり、リダイレクトが "same-origin" モードに違反していない場合、キャッシュされたリダイレクトを行います。

例

// キャッシュを完全にバイパスするために、キャッシュ無効で // リソースをダウンロードします。 fetch("some.json", { cache: "no-store" }).then((response) => { /* レスポンスを消費 */ }); // キャッシュ無効でリソースをダウンロードしますが、 // ダウンロードしたリソースで HTTP キャッシュを更新します。 fetch("some.json", { cache: "reload" }).then((response) => { /* レスポンスを消費 */ }); // 正しい ETag および Date ヘッダーを送信し、If-Modified-Since と // If-None-Match リクエストヘッダーを適切に処理するよう適切に // 構成されたサーバーを扱う際には、キャッシュ無効でリソースを // ダウンロードします。これにより、新鮮なレスポンスを保証する // 検証をシンラインすることができます。 fetch("some.json", { cache: "no-cache" }).then((response) => { /* レスポンスを消費 */ }); // 経済性を考慮してリソースをダウンロードします。できるだけ多くの // 帯域幅を確保するために、キャッシュされた古いレスポンスを優先します。 fetch("some.json", { cache: "force-cache" }).then((response) => { /* レスポンスを消費 */ }); // 単純な期限切れを再検証するクライアントレベルの実装。 // キャッシュされた古いレスポンスを優先しますが、あまりにも古い場合は更新します。 // AbortController および signal により、よりよくメモリーの掃除ができます。 // 実際には、値を変更する必要があるため、パスとコントローラーの参照を取る関数となります。 let controller = new AbortController(); fetch("some.json", { cache: "only-if-cached", mode: "same-origin", signal: controller.signal, }) .catch((e) => e instanceof TypeError && e.message === "Failed to fetch" ? { status: 504 } // Chrome の回避策。TypeError で失敗する : Promise.reject(e), ) .then((res) => { if (res.status === 504) { controller.abort(); controller = new AbortController(); return fetch("some.json", { cache: "force-cache", mode: "same-origin", signal: controller.signal, }); } const date = res.headers.get("date"), dt = date ? new Date(date).getTime() : 0; if (dt < Date.now() - 86_400_000) { // 24 時間以上古ければ controller.abort(); controller = new AbortController(); return fetch("some.json", { cache: "reload", mode: "same-origin", signal: controller.signal, }); } // その他の条件 if (dt < Date.now() - 300_000) // 5 分以上古ければ fetch("some.json", { cache: "no-cache", mode: "same-origin" }); // no cancellation or return value. return res; }) .then((response) => { /* （おそらく古い）レスポンスを消費する */ }) .catch((error) => { /* AbortError/DOMException または TypeError となる */ });