Feature: Make all-inclusive NetworkFirst route registration optional

[gerardo-rodriguez]

What problem does this PR solve?

There exists an assumption that all applications using the NUXT PWA module should, by default, use a runtime NetworkFirst caching strategy for all assets that match the '/.*' route. Some applications (including the current one we are working on that is using the @nuxtjs/pwa module) make this assumption invalid. This configuration should be optional and configurable via the nuxt.config.js Workbox settings.

Currently, the generated SW file has this line:

workboxSW.router.registerRoute(new RegExp('/.*'), workboxSW.strategies.networkFirst({}), 'GET')

Instead of making this a default, it should be optional to include this functionality.

Proposed changes

The nuxt.config.js file should allow a Boolean flag to control adding the '/.*' NetworkFirst runtime caching route registration.

Example nuxt.config.js configuration:

// nuxt.config.js

modules: [
  ['@nuxtjs/pwa', {
    workbox: {
      offline: false
    }
  }]
]

As seen in the file diff for this PR, the defaults object in the workbox/index.js file would not include the '/.*' URL pattern object in the defaults._runtimeCaching array only leaving the "_nuxt" resources runtime cache. Then, immediately after, there is a check for the offline boolean flag that optionally adds the '/.*' pattern object if true. 😉

I have yet to contribute to this project, so feedback is greatly appreciated. Thank you in advance! 😄

[gerardo-rodriguez]

FYI, I had asked a question on the NUXT community forum about this. In case anyone ran into that. 😉

https://nuxtjs.cmty.io/nuxt-community/pwa-module/issues/c35

[pi0]

Hey @gerardo-rodriguez. Thanks for your interest and PR. I think it could be a nice enhancement to allow disabling page-level caching or modify its regex.

• Looking at the changes i think moduleOptions.offline || true can be simplified to true (As default) and moving if (defaults.offline) condition after options assignment something like if (options.offline)
• offline seems little confusing about this option. As it is for route level caching. What's your idea about cacheRoutes ?

[gerardo-rodriguez]

Thanks for your interest and PR.

@pi0 Absolutely! Thanks for all the work done on this project!

I think it could be a nice enhancement to allow disabling page-level caching or modify its regex.

For sure, one of the issues this is causing us is all application API requests are inadvertently being cached using the NetworkFirst caching strategy. If the app went offline, the cached API responses would be used. If this application was intended to be an offline application, this would be great! But, it is not intended to be an offline app and providing the user old API cached responses will actually cause more UX confusion than actually helping. 🙈

Looking at the changes i think moduleOptions.offline || true can be simplified to true (As default) and moving if (defaults.offline) condition after options assignment something like if (options.offline)

Oh, good call! I can make that change! 😉

offline seems little confusing about this option. As it is for route level caching. What's your idea about cacheRoutes ?

This was the toughest part of this change proposal! LOL #namingThingsIsHard I went with offline only because that's what the existing comment seemed to imply, but I'm definitely open to suggestions. Regarding your suggestion to use cacheRoutes, technically, this caches more than just routes (I'm thinking the API requests described above). Hmm... 🤔

[pi0]

technically, this caches more than just routes (I'm thinking the API requests described above)

Sounds reasonable. We can keep it as offline option :)

[gerardo-rodriguez]

@pi0 Feedback has been addressed! Thanks so much! 😄 Let me know if you see any further changes that I should make. 😉

[pi0]

LGTM

[gerardo-rodriguez]

@pi0 Heads up! I just noticed this today. This should be options._runtimeCaching.push() (not defaults._runtimeCaching.push()). 🙈

[pi0]

Thanks for notifying me. Will fix it :)