Workbox fallback response with networkFirst strategy - service-worker

Question

I am using Workbox in my service worker and I use this strategy to provide a fallback response to a route that should show when offline and page is not in cache:
const FALLBACK_URL = '/offline/';
const urlHandler = workbox.strategies.staleWhileRevalidate({
cacheName: 'page-cache'
});
workbox.routing.registerRoute(
/\/.+\//,
({event}) => {
return urlHandler.handle({event})
.catch(() => caches.match(FALLBACK_URL));
});
This works well (I have alreaedy cached FALLBACK_URL) when I use staleWhileRevalidate strategy and when I use networkOnly strategy. However, I would really like to use networkFirst strategy but when I try that I get the following error when visiting pages that are not in the cache:
and the console says
'The FetchEvent for "https://staging.bassbuddha.com/pedals/" resulted in a network error response: an object that was not a Response was passed to respondWith().'
What am I doing wrong?
I am using version 3.4.1
https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js

Answer 1

It turns out that this is intentional as per this issue on the Workbox GitHub repo. Here is the quote on networkFirst (as opposed to other strategies) by jeffposnick:
networkFirst does not end up throwing in that scenario because the
underlying network exception triggers a cache.match() lookup, and
cache.match() doesn't throw/reject when there's a cache miss. Instead,
it resolves with undefined.
So the solution to fallback with networkFirst with fallback in Workbook is to catch undefined in the response and match it to the fallback url like so:
const FALLBACK_URL = '/offline/';
const urlHandler = workbox.strategies.networkFirst({
cacheName: 'page-cache'
});
workbox.routing.registerRoute(
/\/.+\//,
({event}) => {
return urlHandler.handle({event})
.then((response) => {
return response || caches.match(FALLBACK_URL);
})
.catch(() => caches.match(FALLBACK_URL));
});