使用 Vue CLI 3 创建的 PWA 的 Workbox CacheFirst 策略问题

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

您在 DevTools 的缓存存储查看器中看到的 Cache-Control header 是您的网络服务器最终设置的 Cache-Control header 值是不是 workbox-cache-expiration 在确定缓存条目过期之前要等待多长时间时使用。

根据您展示的内容，您应该会得到预期的行为，即只要 maxAgeSeconds 和 maxEntries 服务工作线程就会使用缓存的字体没有违反约束条件。

所以...您是否真的看到 Workbox 无法使用缓存的字体？

使用 Vue CLI 3 创建的 PWA 的 Workbox CacheFirst 策略问题

Workbox CacheFirst Strategy Issue for PWA Created Using Vue CLI 3

cache-control

service-worker

progressive-web-apps

vuejs2

workbox-webpack-plugin