How to change max-age of cache control in Nuxt.js?

Question

Using Nuxt.js, I'm testing a caching strategy for offline support using @nuxtjs/pwa package.

However, even if I set the maxAgeSeconds property of workbox, as long as I look at the network panel of Chrome DevTools, max-age of Cache-Control does not change. max-age is always 31536000. I'd like to control max-age of each files. What are the possible solutions?

These are the package versions.

"@nuxtjs/pwa": "^3.0.0-beta.16",
"nuxt": "^2.4.0"

Nuxt.js is working as universal mode.

I enter these commands.

npm run build

npm run start

max-age did not change for all files with the maxAgeSeconds property set.

If I check /static/sw.js created after build, I can see the following.

workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({"cacheName":"bundle-files","cacheExpiration":{"maxAgeSeconds":604800,"maxEntries":30}}), 'GET')

Because I recognize @nuxtjs/pwa as a wrapper module of workbox, I checked the workbox reference.

Then there was no cacheExpiration in theoptions of the CacheFirst constructor.

CacheFirst

Then, I made sw.js and rewritten it as follows.

workbox.routing.registerRoute(
  new RegExp('/_nuxt/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'bundle-files',
    cacheExpiration: { maxAgeSeconds: 604800, maxEntries: 30 }
  }),
  'GET'
)

However, the result has not changed.

Even if I set autoRegister to false which means service worker is disabled, the result didn't change.

Therefore, I think there's something in Nuxt.js.

This is nuxt.config.js.

module.exports = {
  mode: 'universal',
  head: require('./config/head'),
  loading: { color: '#fff' },
  css: ['~/assets/scss/style.scss'],
  styleResources: {
    scss: ['~/assets/scss/_vue-globals.scss']
  },
  plugins: [],
  modules: ['@nuxtjs/style-resources', '@nuxtjs/pwa'],
  workbox: {
    cacheNames: {
      prefix: 'Demo'
    },
    config: {
      debug: true
    },
    dev: process.env.NODE_ENV === 'development',
    runtimeCaching: [
      {
        handler: 'cacheFirst',
        urlPattern: '/_nuxt/',
        strategyOptions: {
          cacheName: 'bundle-files',
          cacheExpiration: {
            maxAgeSeconds: 60 * 60 * 24 * 7,
            maxEntries: 30
          }
        }
      },
      {
        handler: 'staleWhileRevalidate',
        urlPattern: '.*fonts.googleapis.com/.*',
        strategyOptions: {
          cacheName: 'google-fonts-stylesheets'
        }
      },
      {
        handler: 'cacheFirst',
        urlPattern: '.*fonts.gstatic.com/.*',
        strategyOptions: {
          cacheName: 'google-fonts-webfonts',
          cacheableResponse: {
            statuses: [0, 200]
          },
          cacheExpiration: {
            maxAgeSeconds: 60 * 60 * 24 * 365,
            maxEntries: 30
          }
        }
      }
    ]
  },
  icon: {
    iconSrc: './static/icon.png',
    sizes: [192, 512]
  },
  manifest: {
    lang: 'ja',
    name: 'Demo',
    description: 'Demo',
    short_name: 'Demo',
    start_url: '/?utm_source=homescreen',
    theme_color: '#ffffff',
    background_color: '#ffffff'
  },
  meta: {
    author: false
  },
  build: {
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

I think I need to manage the Nuxt.js response header issue before Caching strategy with PWA.