Handling fetch failures in cache revalidation

[knolleary]

I'm having an issue with our PWA around authentication.

I've been trying to understand all of the moving parts to be able to ask a coherent question, but I'm not sure I'm there yet.

In summary, we have a backend middleware that redirects any request through an OAuth flow if it's missing a valid session cookie. When accessing the PWA for the first time, index.html is loaded, the user goes through the OAuth flow and redirects back and gets the page loaded - along with the service worker etc.

Some time later, the user session has expired and they reload the page. Because index.hml is cached, it doesn't get reloaded from the server so no auth challenge happens. However, in the background, the service worker is revalidating its cache contents via fetches - these do get challenged for auth, but as they are not interactive sessions, the auth fails. We get console logs that the fetches failed.

For reasons, we cannot change the backend behaviour here, and I'm looking for a solution in the frontend code. What we need to happen at this point is to force a reload of index.html so the auth challenge can happen in the browser. However, I cannot find a way to hook in any code to handle a fetch failure when the worker is revalidating its cache.

I've found some posts that sound close to what we want, but I can't work out how to translate them to something this tool provides.

For example, I've found reference to fetchDidFail (src), but I can't figure out how to make use of that in the context of this tool.

I found this bit of workbox code:

const customPlugin = {
    fetchDidFail: (params) => {
        console.log('fetchDidFail:', params)
    }
}

workbox.routing.registerRoute(
    ({ url }) => url.hostname === 'httpbin.org',
    new workbox.strategies.StaleWhileRevalidate({ plugins: [customPlugin] })
)

But I can't figure out how to map that to the call to registerRoute we have:

registerRoute(new NavigationRoute(
    createHandlerBoundToURL('index.html'),
    { allowlist }
))

If anyone can nudge me in the right direction I would be very grateful. I was hoping that handling fetch errors in the cache code would be a common enough use-case to have googlable examples for.