Pwa-module: Add Option to Remove Runtime Caching of /_nuxt/.* Resources

[josephepotter]

What problem does this feature solve?

Regardless of the options that I put into the nuxt config, the following line gets added to the generated service worker:

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), workbox.strategies.cacheFirst({}), 'GET')

With my implementation, when a request is made to get a file from the _nuxt folder, and the file is not found in the runtime cache, the service worker does a network request regardless of whether the file is already in precache. If I am offline, the file doesn't get found, even if the file is present in the precache. As a result, I am unable to cache site pages until they have been visited.

What does the proposed changes look like?

An option could be added to the workbox config to optionally disable this line from being added to the service-worker. I was able to achieve the functionality I want locally by editing index.js in @nuxtjs/workbox in my node_modules in the following way:

index.js

const defaults = {
    autoRegister: true,
    routerBase,
    publicPath,
    swSrc: path.resolve(this.options.buildDir, 'sw.template.js'),
    swDest: path.resolve(this.options.srcDir, this.options.dir.static || 'static', 'sw.js'),
    directoryIndex: '/',
    cachingExtensions: null,
    routingExtensions: null,
    config: null,
    cacheId: process.env.npm_package_name || 'nuxt',
    clientsClaim: true,
    skipWaiting: true,
    globPatterns: ['**/*.{js,css}'],
    globDirectory: undefined,
    modifyUrlPrefix: {
      '': fixUrl(publicPath)
    },
    nuxtAssetsRuntime: true, // Add the option in defaults. Default to true
    offline: true,
    offlinePage: null,
    offlineAssets: [],
    _runtimeCaching: [], // Remove url pattern from defaults
    runtimeCaching: []
  };

  const options = defaultsDeep({}, this.options.workbox, moduleOptions, defaults);

  if (options.nuxtAssetsRuntime) {
    // Optionally cache all _nuxt resources at runtime
    // They are hashed by webpack so are safe to loaded by cacheFirst handler
    options._runtimeCaching.push({
      urlPattern: fixUrl(publicPath + '/.*'),
      handler: 'cacheFirst'
    });
  }

and then adding the option in my nuxt config:

nuxt.config.js

workbox: {
    ...
    nuxtAssetsRuntime: false,
    ...
 },

If needed, I could submit a pull request for this.

_{This feature request is available on Nuxt community (#c85)}

[koresar]

I'd also like to have an option to disable /.* caching.

[pi0]

Both are possible with 3.0.0:

{
  workbox: {
    cacheAssets: false, // for /*
    offline: false // for /_nuxt/*
  }
}

But actually, there is no reason to do this. With pwa@3 preache is removed and assets will be cached on the fly.