Workbox CacheFirst Strategy Issue for PWA Created Using Vue CLI 3
我最近使用Vue CLI 3创建的PWA很好用,除了我不能用它缓存我的字体的时间长于
这是我的设置:
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, }, }, }, ], }, }, }; |
结果
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 |
我想念什么?
在DevTools的"缓存存储"查看器中看到的
根据显示的内容,您应该会获得预期的行为,即,只要不使用
那么...您实际上是在看到Workbox无法使用缓存的字体吗?