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 March 2017.

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

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

cacheRequest インターフェイスの読み取り専用プロパティで、リクエストのキャッシュモードを保持します。リクエストがブラウザーの 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" モードに違反していない場合、キャッシュされたリダイレクトを行います。

js
// キャッシュを完全にバイパスするために、キャッシュ無効で
// リソースをダウンロードします。
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 となる */
  });

仕様書

Specification
Fetch
# ref-for-dom-request-cache②

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
cache
only-if-cached

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報