The onfetch property of the ServiceWorkerGlobalScope
interface is an event handler fired whenever a fetch
event occurs (usually when the fetch()
method is called.)
serviceWorkerGlobalScope.onfetch = function(fetchEvent) { ... };
This code snippet is from the service worker prefetch sample (see prefetch example live.) The ServiceWorkerGlobalScope.onfetch
event handler listens for the fetch
event. When fired, the code returns a promise that resolves to the first matching 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', function(event) { console.log('Handling fetch event for', event.request.url); event.respondWith( caches.match(event.request).then(function(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(function(response) { console.log('Response from network is:', response); return response; }).catch(function(error) { console.error('Fetching failed:', error); throw error; }); }) ); });
Specification |
---|
Service Workers 1 # dom-serviceworkerglobalscope-onfetch |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
onfetch |
40 |
17 |
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
|
No |
24 |
11.1 |
40 |
40 |
44 |
24 |
11.3 |
4.0 |
Promise
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onfetch