My scenario is the following:
fetch
, so that's already coveredreturn
if the scenario in bullet 5 is trueSnippet of my current code:
function onFetch(event) {
if (!event.request.url.startsWith("example.com")) {
return;
} else {
event.respondWith(
fetch(event.request)
.then(req => {
// doing something with the request
})
.catch((error)=> {
// handle errors etc.
})
.finally(()=> {
// cleanup
})
);
}
}
self.addEventListener('fetch', onFetch);
My question: Is it OK if I just return nothing like in the snippet, or, do I need to return something specific, like a new promise by fetching the original request (like I'm doing on the else block)?
Thanks!
It is absolutely okay to do what you're doing. Not calling event.respondWith()
is a signal to the browser that a given fetch
handler is not going to generate a response to a given request, and you can structure your code to return
early to avoid calling event.respondWith()
.
You might have multiple fetch
handlers registered, and if the first one returns without calling event.respondWith()
, the next fetch
handler will then get a chance to respond. If all of the fetch
handlers have executed and none of them call event.respondWith()
, the browser will automatically handle the request as if there were no service worker at all, which is what you want.
In terms of observed behavior, not calling event.respondWith()
at all ends up looking similar to what would happen if you called event.respondWith(event.request)
. But there is overhead involved in making a fetch()
request inside of a service worker and then passing the response body from the service worker thread back to the main program, and you avoid that overhead if you don't call event.respondWith()
. So, I'd recommend the approach you're taking.