Vite-PWA 插件中动态图片的离线缓存策略

问题背景

在使用Vite-PWA插件开发渐进式Web应用时，开发者经常会遇到动态图片的离线缓存问题。典型场景是：用户在线登录时获取产品数据（包含图片URL），但在离线状态下需要显示这些图片。

核心挑战

1. 图片存储在外部服务器/不同域名下
2. 需要预缓存但不在初始加载时显示的图片
3. 跨域资源的缓存限制

解决方案

1. 配置Workbox运行时缓存

通过Vite-PWA插件的runtimeCaching配置，可以设置特定的图片缓存策略：

runtimeCaching: [
  {
    urlPattern: ({ url }) => url.pathname.match(/^\/storage\//),
    handler: 'NetworkFirst',
    options: {
      cacheName: 'product-images-cache',
      expiration: {
        maxEntries: 50,
        maxAgeSeconds: 60 * 60 * 24 * 7 // 7天
      },
      matchOptions: {
        ignoreVary: true,
        ignoreSearch: true
      },
      cacheableResponse: {
        statuses: [0, 200] // 包含跨域响应
      }
    }
  }
]

2. 跨域资源处理要点

对于外部域名的图片资源，需要特别注意：

1. 图片服务器必须配置正确的CORS头信息
2. 前端图片标签需要添加crossorigin属性
3. 缓存响应状态需包含0（跨域不透明响应）

3. 缓存策略选择

• NetworkFirst：优先从网络获取，失败时使用缓存
• CacheFirst：优先使用缓存，适合不常变化的资源
• StaleWhileRevalidate：快速返回缓存同时更新缓存

实现建议

1. 对于产品图片这类可能大量但需要离线访问的资源，建议：

   • 设置合理的maxEntries限制
   • 根据业务需求调整maxAgeSeconds
   • 考虑使用Web Worker管理缓存

2. 在Nginx配置中确保添加正确的CORS头：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET';

注意事项

1. 浏览器对不透明响应(跨域资源)有7MB/资源的存储限制
2. 首次请求时图片不会被缓存，需要二次访问才会生效
3. 对于关键图片，可考虑在Service Worker安装阶段预缓存

通过合理配置Vite-PWA的缓存策略，可以有效解决动态图片的离线访问问题，提升PWA应用的用户体验。