关于vuejs2:使用Vue CLI 3创建的PWA的Workbox CacheFirst策略问题

Workbox CacheFirst Strategy Issue for PWA Created Using Vue CLI 3

我最近使用Vue CLI 3创建的PWA很好用,除了我不能用它缓存我的字体的时间长于max-age=0

这是我的设置:

vue.config.sys(适用部分)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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(提供文件夹应用程序)

1
2
3
4
5
6
7
8
9
10
11
12
13
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

ScreenCache-Control标头是您的Web服务器最终设置的内容。workbox-cache-expiration在确定到期前要等待多长时间时不使用该Cache-Control标头值。但是,已缓存的条目。

根据显示的内容,您应该会获得预期的行为,即,只要不使用maxAgeSecondsmaxEntries约束,服务工作者就将使用缓存的字体违反。

那么...您实际上是在看到Workbox无法使用缓存的字体吗?