为何我的PWA中字体未被缓存？（基于Nuxt 3与nuxt-pwa-module）

1. 核对offlineAssets路径配置 #

先确认nuxt.config.ts里的路径和实际字体请求路径完全匹配。比如字体存在public/fonts下，请求路径是/fonts/xxx.ttf，配置就得这么写：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    workbox: {
      offlineAssets: [
        '/fonts/*.ttf',
        '/fonts/*.woff',
        '/fonts/*.svg'
      ]
    }
  }
})

注意路径的大小写，部分服务器对大小写敏感，别写错了。

2. 手动指定字体的缓存策略 #

默认的offlineAssets缓存规则可能没覆盖到字体请求，你可以用runtimeCaching明确设置字体的缓存策略，确保Workbox能正确缓存：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    workbox: {
      runtimeCaching: [
        {
          urlPattern: /\/fonts\/.*\.(ttf|woff|svg)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'font-cache',
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ],
      offlineAssets: [
        '/fonts/*.ttf',
        '/fonts/*.woff',
        '/fonts/*.svg'
      ]
    }
  }
})

这里用正则匹配所有字体请求，指定CacheFirst策略，同时允许缓存状态码0（Service Worker拦截的请求）和200的响应。

3. 清除旧缓存并重启Service Worker #

旧的缓存会导致新配置不生效，按以下步骤操作：

• 打开浏览器开发者工具，切换到Application标签
• 在Service Workers里点击Unregister，注销旧的服务 worker
• 找到Cache Storage，删除和字体、Workbox相关的缓存
• 刷新页面，让新的服务 worker 注册并重新缓存字体

4. 验证离线请求状态 #

打开开发者工具的Network标签，勾选Offline后刷新页面：

• 查看字体请求的状态，正常应该显示(from cache)或(ServiceWorker)
• 如果显示Failed，说明缓存没生效，回去检查路径和策略配置

5. 排查跨域问题（如果涉及） #

虽然你说字体托管在自己的/fonts文件夹，但如果是跨域名加载的话，要确保服务器返回Access-Control-Allow-Origin头，否则服务 worker 没法缓存跨域资源。同域名的话可以忽略这一步。

内容的提问来源于stack exchange，提问作者Paulie