From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/request/cache/index.html | 143 ++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 files/ja/web/api/request/cache/index.html (limited to 'files/ja/web/api/request/cache') diff --git a/files/ja/web/api/request/cache/index.html b/files/ja/web/api/request/cache/index.html new file mode 100644 index 0000000000..be3a255989 --- /dev/null +++ b/files/ja/web/api/request/cache/index.html @@ -0,0 +1,143 @@ +--- +title: Request.cache +slug: Web/API/Request/cache +tags: + - API + - Cache + - Experimental + - Fetch + - Property + - Reference + - requesut +translation_of: Web/API/Request/cache +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} インターフェースの cache 読み取り専用プロパティには、リクエストのキャッシュモードが含まれています。リクエストがブラウザの HTTP キャッシュ とどのように相互作用するかを制御します。

+ +

構文

+ +
var currentCacheMode = request.cache;
+ +

値

+ +

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

+ + + +

例

+ +
// Download a resource with cache busting, to bypass the cache
+// completely.
+fetch("some.json", {cache: "no-store"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting, but update the HTTP
+// cache with the downloaded resource.
+fetch("some.json", {cache: "reload"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting when dealing with a
+// properly configured server that will send the correct ETag
+// and Date headers and properly handle If-Modified-Since and
+// If-None-Match request headers, therefore we can rely on the
+// validation to guarantee a fresh response.
+fetch("some.json", {cache: "no-cache"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with economics in mind!  Prefer a cached
+// albeit stale response to conserve as much bandwidth as possible.
+fetch("some.json", {cache: "force-cache"})
+  .then(function(response) { /* consume the response */ });
+
+// Naive stale-while-revalidate client-level implementation.
+// Prefer a cached albeit stale response; but update if it's too old.
+// AbortController and signal to allow better memory cleaning.
+// In reality; this would be a function that takes a path and a
+// reference to the controller since it would need to change the value
+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}) : // Workaround for chrome; which simply fails with a 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() - 86400000)) {
+      // if older than 24 hours
+      controller.abort()
+      controller = new AbortController();
+      return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal})
+    }
+
+    // Other possible conditions
+    if (dt < (Date.now() - 300000)) // If it's older than 5 minutes
+      fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
+    return res
+  })
+  .then(function(response) { /* consume the (possibly stale) response */ })
+  .catch(error => { /* Can be an AbortError/DOMError or a TypeError */ });
+ +

Specifications

+ + + + + + + + + + + + + + +
仕様書状態コメント
{{SpecName('Fetch','#dom-request-cache','cache')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Request.cache")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf