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

Мой 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 по умолчанию)

service-worker.js

.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

Скриншот кэш-хранилища Chrome Dev Tools

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


vuejs2 progressive-web-apps service-worker cache-control workbox-webpack-plugin
person Doug Allrich    schedule 03.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

person Jeff Posnick    schedule 06.12.2018
comment
Сбоев не отмечено, но это потому, что я не тестировал на сбой. Я был полностью сосредоточен на содержимом заголовка Cache-Control. Так что это работает; это хорошо. Спасибо за объяснение. Я не видел, чтобы это поведение было задокументировано, но я вижу, что вы ссылались на него здесь. Таким образом, невозможно визуально проверить в Dev Tools, как долго Workbox кэширует файл до истечения срока его действия? Эмпирическое тестирование - это (единственный) способ узнать наверняка? - person Doug Allrich; 08.12.2018