VitePWA插件中解决缓存清单图标冲突问题

在使用VitePWA插件时，开发者可能会遇到一个常见问题：add-to-cache-list-conflicting-entries错误。这个错误通常发生在插件尝试缓存清单图标时与全局缓存模式产生冲突的情况下。

问题现象

当配置了manifest中的图标并同时设置了globPatterns包含图片文件时，VitePWA插件会尝试两次缓存相同的图标文件：一次作为manifest图标，另一次作为匹配全局模式的文件。这会导致插件抛出冲突错误，提示两个看似相同但实际上带有不同查询参数的URL版本。

问题根源

该问题的本质在于缓存策略的重叠：

1. VitePWA默认会自动缓存manifest中声明的图标
2. 同时，开发者设置的globPatterns: ['**/*.{js,css,html,ico,png,svg}']也会匹配这些图标文件
3. 插件内部会为缓存文件添加修订参数?__WB_REVISION__=xxx，导致系统认为这是两个不同的资源

解决方案

有两种主要解决方法：

1. 禁用自动缓存manifest图标
   在VitePWA配置中添加includeManifestIcons: false选项，明确告诉插件不要自动缓存manifest图标：

   VitePWA({
     // 其他配置...
     includeManifestIcons: false
   })
   

2. 调整globPatterns排除图标文件
   如果确实需要自动缓存manifest图标，可以修改globPatterns，排除已由manifest处理的图标路径：

   globPatterns: ['**/*.{js,css,html,ico,svg}', '!**/assets/icons/*.png']
   

最佳实践建议

对于大多数项目，推荐采用第一种方案（设置includeManifestIcons: false），因为：

• 更清晰地分离manifest资源和其他静态资源的缓存策略
• 避免潜在的缓存冲突
• 便于单独控制manifest资源的缓存行为

如果项目有特殊需求必须同时缓存manifest图标和其他图片资源，则可以考虑第二种方案，但需要注意维护好路径排除规则。

理解这一机制有助于开发者更好地控制PWA应用的缓存策略，避免资源重复缓存带来的潜在问题。