title: How to change max-age of cache control in Nuxt.js?
body: <p>Using Nuxt.js, I'm testing a caching strategy for offline support using <code>@nuxtjs/pwa</code> package.</p>
  
  <p>However, even if I set the <code>maxAgeSeconds</code> property of workbox, as long as I look at the network panel of Chrome DevTools, <code>max-age</code> of <code>Cache-Control</code> does not change. <code>max-age</code> is always 31536000. I'd like to control <code>max-age</code> of each files. What are the possible solutions?</p>
  
  <p>These are the package versions.</p>
  
  <pre><code>"@nuxtjs/pwa": "^3.0.0-beta.16",
  "nuxt": "^2.4.0"
  </code></pre>
  
  <p>Nuxt.js is working as universal mode.</p>
  
  <p>I enter these commands.</p>
  
  <p><code>npm run build</code></p>
  
  <p><code>npm run start</code></p>
  
  <p><code>max-age</code> did not change for all files with the maxAgeSeconds property set.</p>
  
  <p>If I check <code>/static/sw.js</code> created after build, I can see the following.</p>
  
  <pre><code>workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({"cacheName":"bundle-files","cacheExpiration":{"maxAgeSeconds":604800,"maxEntries":30}}), 'GET')
  </code></pre>
  
  <p>Because I recognize @nuxtjs/pwa as a wrapper module of workbox,
  I checked the workbox reference.</p>
  
  <p>Then there was no <code>cacheExpiration</code> in the<code>options</code> of the <code>CacheFirst</code> constructor.</p>
  
  <p><a href="https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.CacheFirst" rel="nofollow noreferrer">CacheFirst</a></p>
  
  <p>Then, I made sw.js and rewritten it as follows.</p>
  
  <pre><code>workbox.routing.registerRoute(
    new RegExp('/_nuxt/'),
    new workbox.strategies.CacheFirst({
      cacheName: 'bundle-files',
      cacheExpiration: { maxAgeSeconds: 604800, maxEntries: 30 }
    }),
    'GET'
  )
  </code></pre>
  
  <p>However, the result has not changed.</p>
  
  <p>Even if I set autoRegister to false which means service worker is disabled, the result didn't change. </p>
  
  <p>Therefore, I think there's something in Nuxt.js.</p>
  
  <p>This is nuxt.config.js.</p>
  
  <pre><code>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 &amp;&amp; ctx.isClient) {
          config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/
          })
        }
      }
    }
  }
  
  </code></pre>
  
  <p>I think I need to manage the Nuxt.js response header issue before Caching strategy with PWA.</p>