respondWith and Fetch Events
Today, in the continuation of my Grow With Google Udacity Scholarship, I learned about the Service Worker life cycle, and how to set up the service worker to HIJACK the requests!
in particular, I learned about the respondWith
method, which in its basic form looks like this:
self.addEventListener('fetch', function(event) {
event.respondWith(
new Response("I'm the body", {
status: 200,
headers: {
'Content-Type': 'Text/Html'
}
})
);
});
this function takes a promise that resolves to a Response object, with a body blob and optionally an object filled with further config info for the response, like headers etc.
more complex uses of this method will involve fetch
, more promise configs like async/await
, or catch
and some conditionals. I’m off to learn those now!
Resources
- MDN Docs: Response Object
- MDN Docs: FetchEvent.respondWith()