Therequest read-only property of theFetchEvent interface returns theRequest that triggeredthe event handler.

This property is non-nullable (since version 46, in the case of Firefox.) If a requestis not provided by some other means, the constructoroptions object mustcontain a request (seeFetchEvent().)

Value

ARequest object.

Examples

This code snippet is from theservice worker fetch sample (run the fetch sample live). Theonfetch event handlerlistens for thefetch event. When fired, pass a promise that back to thecontrolled page toFetchEvent.respondWith().This promise resolves to the first matching URL request in theCacheobject. If no match is found, the code fetches a response from the network.

The code also handles exceptions thrown from thefetch() operation. Note that an HTTP errorresponse (e.g., 404) will not trigger an exception. It will return a normal responseobject that has the appropriate error code set.

self.addEventListener("fetch", (event) => {  console.log("Handling fetch event for", event.request.url);  event.respondWith(    caches.match(event.request).then((response) => {      if (response) {        console.log("Found response in cache:", response);        return response;      }      console.log("No response found in cache. About to fetch from network…");      return fetch(event.request)        .then((response) => {          console.log("Response from network is:", response);          return response;        })        .catch((error) => {          console.error("Fetching failed:", error);          throw error;        });    }),  );});

Specifications

Browser compatibility

See also

• Using Service Workers
• Service workers basic code example
• Using web workers