Проблема стратегии 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 не может использовать кэшированные шрифты?