The request read-only property of the FetchEvent interface returns the Request that triggered the event handler.

This property is non-nullable (since version 46, in the case of Firefox.) If a request is not provided by some other means, the constructor init object must contain a request (see FetchEvent().)


A Request object.


This code snippet is from the service worker fetch sample (run the fetch sample live). The onfetch event handler listens for the fetch event. When fired, pass a promise that back to the controlled page to FetchEvent.respondWith(). This promise resolves to the first matching URL request in the Cache object. If no match is found, the code fetches a response from the network.

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

self.addEventListener('fetch', (event) => {
  console.log('Handling fetch event for', event.request.url);

    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;


Service Workers
# fetch-event-request

Browser compatibility

BCD tables only load in the browser

See also