This is the event type for fetch
events dispatched on the service worker global scope. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the event.respondWith()
method, which allows us to provide a response to this fetch.
Constructor
FetchEvent()
- Creates a new
FetchEvent
object. This constructor is not typically used. The browser creates these objects itself and provides them tofetch
event callbacks.
Properties
Inherits properties from its ancestor, Event
.
FetchEvent.clientId
Read only- The
id
of the same-originclient
that initiated the fetch. FetchEvent.preloadResponse
Read only- A
Promise
for aResponse
, orundefined
if this fetch is not a navigation, or navigation preload is not enabled. FetchEvent.replacesClientId
Read only- The
id
of theclient
that is being replaced during a page navigation. FetchEvent.resultingClientId
Read only- The
id
of theclient
that replaces the previous client during a page navigation. FetchEvent.request
Read only- The
Request
the browser intends to make.
Methods
Inherits methods from its parent, ExtendableEvent
.
FetchEvent.respondWith()
- Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.
ExtendableEvent.waitUntil()
-
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.
Examples
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.
self.addEventListener('fetch', event => { // 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); }()); });
Specifications
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'FetchEvent()' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
FetchEvent | Chrome Full support 40 | Edge Full support ≤18 | Firefox
Full support
44
| IE No support No | Opera Full support 27 | Safari No support No | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support 44 | Opera Android Full support 27 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
FetchEvent() constructor | Chrome Full support 40 | Edge Full support ≤18 | Firefox
Full support
44
| IE No support No | Opera Full support 27 | Safari No support No | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support 44 | Opera Android Full support 27 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
client | Chrome Full support 42 | Edge Full support ≤79 | Firefox Full support 44 | IE No support No | Opera Full support 27 | Safari No support No | WebView Android Full support 42 | Chrome Android Full support 44 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
clientId | Chrome Full support 49 | Edge Full support ≤79 | Firefox
Full support
45
| IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 45 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
isReload | Chrome Full support 45 | Edge Full support 17 | Firefox
No support
44 — 74
| IE No support No | Opera Full support 32 | Safari No support No | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 44 | Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
navigationPreload | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE No support No | Opera Full support 46 | Safari No support No | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS No support No | Samsung Internet Android Full support 7.0 |
preloadResponse | Chrome Full support 59 | Edge Full support 18 | Firefox ? | IE No support No | Opera Full support 46 | Safari No support No | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS No support No | Samsung Internet Android Full support 7.0 |
replacesClientId | Chrome No support No | Edge No support 18 — 79 | Firefox Full support 65 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 65 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
request | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support 44 | IE No support No | Opera Full support Yes | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
respondWith | Chrome
Full support
42
| Edge
Full support
≤79
| Firefox
Full support
59
| IE No support No | Opera Full support 29 | Safari No support No | WebView Android
Full support
42
| Chrome Android
Full support
42
| Firefox Android ? | Opera Android Full support 29 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
resultingClientId | Chrome Full support 72 | Edge Full support 18 | Firefox Full support 65 | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android Full support 65 | Opera Android Full support 50 | Safari iOS No support No | Samsung Internet Android Full support 11.0 |
targetClientId | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari No support No | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.