Workbox offline mode works only on root path

Question

Im working on my PWA application. So I have one problem that I can't find any info how to fix.

I use workbox with webpack InjectManifest ( but also tried webpack offline-plugin ).

When I access my webpage at the root and go offline, I can see it's working perfectly. But when I change route to '/authorize' or basically any other route and go offline, it doesn't work.

Is there any requirement that it will work only in case that we are on root path? I can't find anything about it except for this: https://github.com/quasarframework/quasar-cli/issues/131

Answer 1

Ok found it. So basically it all comes to routing.

https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route https://developers.google.com/web/tools/workbox/modules/workbox-strategies

In my case, I wanted to always serve content as for SPA so I had to add workbox.routing.registerNavigationRoute('/index.html'); to my workbox config.

At the end it looks like this:

1) Webpack plugin:

const commonPlugins = [
  new workboxPlugin.InjectManifest({
    swSrc: './src/workbox-sw.js',
    swDest: 'workbox-sw.js',
  }),
];

2) Content of workbox-sw

/* globals workbox, self */

workbox.setConfig({
  debug: true
});

workbox.core.setCacheNameDetails({
  prefix: 'sneak-client',
  suffix: 'v1',
  precache: 'sneak-precache',
  runtime: 'sneak-runtime-cache',
});

workbox.routing.registerNavigationRoute('/index.html');

workbox.precaching.precacheAndRoute(self.__precacheManifest);