Request: cache プロパティ
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 となる */
});
仕様書
Specification |
---|
Fetch Standard # ref-for-dom-request-cache② |
ブラウザーの互換性
BCD tables only load in the browser