Workbox service worker maxAgeSeconds query

Question

I have implemented a service worker for my website. However I am not sure about the expiration setting on this.

Am currently using Nextjs for page rendering and Workbox with Apollo for data mangement. My Workbox config:

// File to generate the service worker.
require("dotenv").config()
const workboxBuild = require("workbox-build")
const { COUNTRY: country, NODE_ENV } = process.env
const urlPattern = new RegExp(`/${country}\/static\/.*/`)

// https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
const buildSW = () => {
  return workboxBuild.generateSW({
    swDest: "public/workbox-worker.js",
    clientsClaim: true,
    mode: NODE_ENV,
    skipWaiting: true,
    sourcemap: false,
    runtimeCaching: [
      {
        urlPattern: urlPattern,

        // Apply a cache-first strategy.
        handler: "CacheFirst",
        options: {
          cacheName: "Static files caching",
          expiration: {
            maxEntries: 50,
            maxAgeSeconds: 3600,
          },
        },
      },
    ],
  })
}

buildSW()

My service worker is installed and activated and has started caching files.

My only question is shouldn't the max age here be 3600? Or am I doing something wrong?

Answer 1

I think you are confusing the The Cache-Control HTTP header with the Workbox Expiration.

As the service can reply to a request it may return a file regardless of the Cache-Control header. What you have configured is to have Workbox evict things from it's cache after 50 or 3600 secs. The service worker has it's own cache that can be found in the application tab of the chrome dev tool

see this question about how the two interact with each other - If you are using Service Workers do you still need cache-control headers?