Clash Royale CLAN TAG#URR8PPP

Workbox offline mode works only on root path

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

1 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.

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

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);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.