FetchEvent.request
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()
.)
Value
A Request
object.
Examples
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', 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;
});
})
);
});
Specifications
Specification |
---|
Service Workers 1 # fetch-event-request |
Browser compatibility
BCD tables only load in the browser