Add docs for Request.isHistoryNavigation (#36514)

* Add docs for `Request.isHistoryNavigation` * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/request/ishistorynavigation/index.md * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: wbamberg <[email protected]>
mdn · Oct 31, 2024 · 22526bd · 22526bd
1 parent a748228
commit 22526bd
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/files/en-us/web/api/request/index.md b/files/en-us/web/api/request/index.md
@@ -32,6 +32,8 @@ You can create a new `Request` object using the {{domxref("Request.Request","Req
   - : Contains the associated {{domxref("Headers")}} object of the request.
 - {{domxref("Request.integrity")}} {{ReadOnlyInline}}
   - : Contains the [subresource integrity](/en-US/docs/Web/Security/Subresource_Integrity) value of the request (e.g., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
+- {{domxref("Request.isHistoryNavigation")}} {{ReadOnlyInline}}
+  - : A boolean indicating whether the request is a history navigation.
 - {{domxref("Request.keepalive")}} {{ReadOnlyInline}}
   - : Contains the request's `keepalive` setting (`true` or `false`), which indicates whether the browser will keep the associated request alive if the page that initiated it is unloaded before the request is complete.
 - {{domxref("Request.method")}} {{ReadOnlyInline}}

diff --git a/files/en-us/web/api/request/ishistorynavigation/index.md b/files/en-us/web/api/request/ishistorynavigation/index.md
@@ -0,0 +1,63 @@
+---
+title: "Request: isHistoryNavigation property"
+short-title: isHistoryNavigation
+slug: Web/API/Request/isHistoryNavigation
+page-type: web-api-instance-property
+browser-compat: api.Request.isHistoryNavigation
+---
+
+{{APIRef("Fetch API")}}{{AvailableInWorkers}}
+
+The **`isHistoryNavigation`** read-only property of the {{domxref("Request")}} interface is a boolean indicating whether the request is a history navigation.
+
+A history navigation is a navigation within the browser's history, made by calling {{domxref("History.go()")}}, {{domxref("History.back()")}}, {{domxref("History.forward()")}}, {{domxref("Navigation.traverseTo()")}}, {{domxref("Navigation.back()")}}, {{domxref("Navigation.forward()")}}, or directly by clicking the browser's back or forward navigation button.
+
+## Value
+
+A boolean value.
+
+## Examples
+
+This example executes in a service worker. It listens for the {{domxref("ServiceWorkerGlobalScope/fetch_event", "fetch")}} event. In the event handler, the service worker checks the `isHistoryNavigation` property to know whether the request happened because of a history navigation. If so, it attempts to respond with a cached response. If the cache does not contain a response for this request, the service worker fetches a response from the network, caches a clone of it, and responds with the network response.
+
+```js
+self.addEventListener("request", (event) => {
+  // ...
+
+  if (event.request.isHistoryNavigation) {
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        if (response !== undefined) {
+          return response;
+        } else {
+          return fetch(event.request).then((response) => {
+            let responseClone = response.clone();
+
+            caches.open("v1").then((cache) => {
+              cache.put(event.request, responseClone);
+            });
+
+            return response;
+          });
+        }
+      }),
+    );
+  }
+
+  // ...
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("History API", "", "", 1)}}
+- {{domxref("Navigation API", "", "", 1)}}
+- {{domxref("Service Worker API", "", "", 1)}}
diff --git a/files/en-us/web/api/requestinit/index.md b/files/en-us/web/api/requestinit/index.md
@@ -115,7 +115,7 @@ You can also construct a `Request` with a `RequestInit`, and pass the `Request`
 
     See [Setting headers](/en-US/docs/Web/API/Fetch_API/Using_Fetch#setting_headers) for more details.
 
-- `integrity`
+- `integrity` {{optional_inline}}
 
   - : Contains the [subresource integrity](/en-US/docs/Web/Security/Subresource_Integrity)
     value of the request.