Проблема стратегии Workbox CacheFirst для PWA, созданная с помощью Vue CLI 3

Question

Мой PWA, недавно созданный с использованием Vue CLI 3, прекрасно работает, за исключением того, что я не могу заставить его кэшировать свои шрифты в течение периода времени дольше, чем max-age=0,

Вот моя установка:

vue.config.sys (применимая часть)

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,
            },
          },
        },
      ],
    },
  },
};

равнодействующая service-worker.js (используется режим GenerateSW по умолчанию)

.htaccess (папка приложение подается из)

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

Что мне не хватает?

Answer 1

Cache-Control заголовок, который вы видите в средстве просмотра Cache Storage в DevTools, - это то, что в конечном итоге устанавливается вашим веб-сервером. Cache-Control значение заголовка не используется workbox-cache-expiration при определении того, как долго ждать до истечения срока действия кэшированной записи.

Исходя из того, что вы показали, похоже, что вы должны получить ожидаемое поведение, то есть кэшированные шрифты будут использоваться работником службы, пока maxAgeSeconds а также maxEntries ограничения не нарушаются.

Итак... вы на самом деле видите, что Workbox не может использовать кэшированные шрифты?