How to enable `'Expiration'` plugin to set `maxAgeSeconds` for `/_nuxt/*` assets

[bryandonmarc]

I can set the maxAgeSeconds for assets from other origins using the 'Expiration' workbox plugin on runtimeCaching.strategyPlugins, however it does not work for same-origin assets. I have tried setting the runtimeCaching.urlPattern to https://<MY_URL>/_nuxt/.* and using the 'Expiration' workbox plugin, but it produces an error. I have failed to find any other relevant property in the Workbox Module docs that might solve my problem.

tl;dr How do I use the 'Expiration' workbox plugin for /_nuxt/* assets to set the maxAgeSeconds ? I'd want my workbox cache to expire after a day, since I frequently statically-generate-then-deploy my site daily to reflect new daily updated data.

ps. I've already set the Cache-Control HTTP headers to handle caching expiration after a day, but apparently the browser’s HTTP cache and workbox cache are two different things.

[bryandonmarc]

The solution was inside runtimeCaching all along, you just need to not set the urlPattern property. I would guess you could also replace the default CacheFirst strategy by setting the handler property, though I haven't tested it. I suggest rewording the Workbox Module docs a bit better? It heavily implies that runtimeCaching is only used for third-party origins.

runtimeCaching: [
  // custom caching options for third-party origins
  // ... { urlPattern: 'https://*.cloudfront.net/.*', ... },

  // for same-origin assets, DO NOT set the `urlPattern` property
  // and set a custom `strategyOptions.cacheName` when planning to use the `'Expiration'` plugin
  {
    strategyOptions: {
      cacheName: 'CUSTOM-CACHE-NAME', //required for Expiration plugin
    },
    strategyPlugins: [
      {
        use: 'Expiration',
        config: {
          maxEntries: 21,
          maxAgeSeconds: 86400,
        },
      },
    ],
  },
],

Closing this for now.