---
title: FetchEvent
slug: Web/API/FetchEvent
tags:
  - API
  - FetchEvent
  - Interface
  - NeedsTranslation
  - Offline
  - Reference
  - Service Workers
  - TopicStub
  - Workers
translation_of: Web/API/FetchEvent
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>

<p><span class="seoSummary">This is the event type for <code>fetch</code> events dispatched on the {{domxref("ServiceWorkerGlobalScope", "service worker global scope", "", 1)}}. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the {{domxref("FetchEvent.respondWith", "event.respondWith()")}} method, which allows us to provide a response to this fetch.</span></p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}</dt>
 <dd>Creates a new <code>FetchEvent</code> object. This constructor is not typically used. The browser creates these objects itself and provides them to <code>fetch</code> event callbacks.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its ancestor, {{domxref("Event")}}</em>.</p>

<dl>
 <dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
 <dd>The {{domxref("Client.id", "id")}} of the same-origin {{domxref("Client", "client")}} that initiated the fetch.</dd>
 <dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
 <dd>A {{jsxref("Promise")}} for a {{domxref("Response")}}, or void if this is not a navigation, or {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} is not enabled.</dd>
 <dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
 <dd>The {{domxref("Request")}} the browser intends to make.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>

<dl>
 <dt>{{domxref("fetchEvent.respondWith()")}}</dt>
 <dd>Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.</dd>
 <dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
 <dd>
 <p>Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.</p>
 </dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.</p>

<pre class="brush: js">addEventListener('fetch', event =&gt; {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method != 'GET') return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(async function() {
    // Try to get the response from a cache.
    const cache = await caches.open('dynamic-v1');
    const cachedResponse = await cache.match(event.request);

    if (cachedResponse) {
      // If we found a match in the cache, return it, but also
      // update the entry in the cache in the background.
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }

    // If we didn't find a match in the cache, use the network.
    return fetch(event.request);
  }());
});</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("api.FetchEvent")}}</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Promise")}}</li>
 <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>