Quasar: PWA Mode: Unable to exclude html from caching due to navigateFallback change

Created on 15 May 2020  Â·  6Comments  Â·  Source: quasarframework/quasar

Hello!

In my app I do not want the html files to be cached by the Service Worker:

      workboxPluginMode: 'GenerateSW',
      workboxOptions: {
        exclude: [/\.html$/]
      },

Looks like the recent change https://github.com/quasarframework/quasar/commit/b646fd6b6d79808b13d7d417c31e82c3bb32aba6 defaults workbox navigateFallback to 'index.html'.

This does not work correctly when attempting to exclude html files, see
https://github.com/GoogleChrome/workbox/issues/1576#issuecomment-408162957

Maybe Quasar should not be assigning navigateFallback by deafult? Is there a way to remove navigateFallback from the workbox options when generating SW file?

Thanks!

bug

All 6 comments

Set navigateFallback yourself and point it to the public path.
But are you sure you don't want the html too? Your PWA will not work offline.

@rstoenescu , Thanks for your reply. I'm not interested in the offline usage at this point and I'd love for users to always get the latest index.html. However, i'd still love to benefit from other PWA perks: asset precache and such.

Not sure if setting it to a public path can make any difference (and what would it be navigationFallback: '/')?

Is there an option to disable navigateFallback so that it does not appear in the generated sw file?

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"));

Yes. If you set it to your public path (example: “/“) then Quasar won’t interfere.

Yes, but in this case I will still end up with the navigationFallback in my sw file:

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/"));

I'd love not to have it as if I were to provide an empty navigateFallback option to the workbox config.
I liked how it was possible to have navigateFallback optional before that recent change.

Hi, thanks for reopening this issue.
I kind of get the idea of Quasar defaulting to index.html, so that users don't have to configure it manually.

In case you want to ignore certain urls, you can do:
navigateFallbackBlacklist: [url] // Workbox v4

In case you want to disable navigationFallback completely, you can do:
navigateFallbackWhitelist: []
Even though it'll result in a bit of a dodgy piece of code in your sw, it'll do the job:

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
  whitelist: [],  
});

Let's review our options. Thanks again.

Related:
https://github.com/GoogleChrome/workbox/issues/1767#issuecomment-553695250

With future "@quasar/app" v1.8.7 you'll be able to set navigateFallback to false which will completely disable this feature.

However, I think that what you actually want is described here: https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa#Reload-%26-Update-Automatically

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tombarfoot picture tombarfoot  Â·  3Comments

slowaways picture slowaways  Â·  3Comments

jean-moldovan picture jean-moldovan  Â·  3Comments

nueko picture nueko  Â·  3Comments

jigarzon picture jigarzon  Â·  3Comments