Redirect to offline page if no cache and redirect to homepage from offline page with @nuxtjs/pwa

Question

WHAT I WOULD LIKE

As the precache of all routes doesn't seem possible (so user would have at least an empty page with app shell):

• issue on GitHub
• opened question on Stackoverflow

WHAT I TRIED

I've settled for an offline page whenever a route is not cached, but I've also been trying for days without success. The default behaviour of @nuxtjs/pwa doesn't seem possible either : issue on GitHub. So I tried a different approach:

1. I added an offline.html page in the static file
2. I declared it in nuxt.config.js:

pwa : {
  workbox: {
    cachingExtensions: ['@/plugins/workbox-cache.js],
    offlineAssets: '/offline.html',
  }
}

3. In the workbox-cache.js plugin, I use the setCatchHandler Workbox function, in the event of an error while navigating, user is redirect to precached offline page.

workbox.routing.setCatchHandler(async ({ event }) => {
  if (event.request.mode === 'navigate') {
    return await workbox.precaching.matchPrecache('/offline.html')
  }
})

WHAT IT'S DOING

As I'm using Keycloak and @nuxtjs/auth-next for authent, I might need more configuration. For now, the behaviour is random and I don't get why.

1. Sometimes the offline page is displayed with success
2. Others it's loading in loop, looking at the logs, seems to reach the /login page then the Keycloak URL obviously without success
3. Others it goes straight to Keycloak URL and display the browser default page, but the logs said that before going to Keycloak URL it tried to load a _nuxt file which isn't cached

I'm at lost. And whenever I managed to have the custom offline page displayed, I would like to go back to the app homepage, but a simple link "/" often results in a loading loop as in point 2.

Any help, tips, hints will really be appreciated! Thanks!

Config:

• "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
• "@nuxtjs/pwa": "^3.3.5",
• "nuxt": "^2.15.8",