Workbox CacheFirst Strategy Issue for PWA Created Using Vue CLI 3

Question

My PWA, recently created using Vue CLI 3, works great, except that I cannot get it to cache my fonts for a period of time longer than max-age=0.

Here is my setup:

vue.config.sys (applicable portion)

module.exports = {
  pwa: {
    workboxOptions: {
      exclude: [/\.eot$/, /\.ttf$/],
      clientsClaim: true,
      skipWaiting: true,
      navigateFallback: 'index.html',
      runtimeCaching: [
        {
          urlPattern: /\.(?:woff|woff2)$/,
          handler: 'cacheFirst',
          options: {
            // Use a custom cache name for this route.
            cacheName: 'fonts',
            // Configure custom cache expiration.
            expiration: {
              maxEntries: 50,
              maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
              // Automatically cleanup if quota is exceeded.
              purgeOnQuotaError: true,
            },
          },
        },
      ],
    },
  },
};

Resultant service-worker.js (uses default GenerateSW mode)

.htaccess (folder app is served from)

RewriteEngine On

# Redirects http calls to their equivalent https URL
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# A simple catch-all fallback route used when the URL entered by the user
# doesn't match any of the provided app routes. This code is needed when
# using history mode in vue-router.
FallbackResource index.html

# Prevents directory viewing from a browser window.
Options -Indexes

Chrome Dev Tools Cache Storage Screen Grab

What am I missing?

Answer 1

The Cache-Control header that you see in the Cache Storage viewer in DevTools is whatever ends up being set by your web server This Cache-Control header value is not used by workbox-cache-expiration when determining how long to wait before expiring the cached entry, though.

Based on what you've shown, it looks like you should get the behavior you expect, i.e. the cached fonts will be used by the service worker as long as the maxAgeSeconds and maxEntries constraints aren't violated.

So... are you actually seeing Workbox fail to use the cached fonts?