VitePWA插件中injectManifest策略下self.__WB_MANIFEST为空数组的解决方案

在使用VitePWA插件时，开发者可能会遇到一个常见问题：当采用injectManifest策略时，self.__WB_MANIFEST在开发环境下被注入为空数组。这种情况通常会让开发者感到困惑，特别是当他们期望看到预缓存清单正常工作时。

问题本质

这个现象实际上是VitePWA插件的预期行为。在开发服务器环境下，预缓存功能会被自动禁用，这是为了避免开发过程中不必要的缓存干扰。插件设计者认为在开发阶段，开发者更希望看到最新的代码变更，而不受缓存影响。

正确配置方法

要解决这个问题，需要注意以下几点配置细节：

1. 策略选择：当使用injectManifest策略时，workbox选项中的globPatterns配置会被忽略，需要在injectManifest选项中单独指定。

2. 插件顺序：确保压缩插件(viteCompression)在PWA插件之前注册，这样可以保证压缩后的资源被正确识别和处理。

3. 开发环境行为：理解在开发环境下self.__WB_MANIFEST为空是正常现象，生产环境会自动填充正确的资源清单。

推荐配置示例

以下是经过优化的配置示例：

export default defineConfig({
  envPrefix: 'REACT_APP_',
  plugins: [
    svgr(),
    react(),
    viteCompression(), // 压缩插件放在PWA插件之前
    VitePWA({
      injectManifest: {
        globPatterns: ['**/*.{js,css,html}'], // 在这里指定资源匹配模式
      },
      srcDir: 'src',
      filename: 'service-worker.js',
      strategies: 'injectManifest',
      injectRegister: false,
      devOptions: {
        enabled: true,
        type: 'module',
      },
    }),
  ],
});

开发与生产环境差异

开发者需要明确区分开发和生产环境的不同行为：

• 开发环境：self.__WB_MANIFEST为空数组，预缓存禁用
• 生产环境：self.__WB_MANIFEST包含所有匹配的资源，预缓存正常工作

这种设计有助于提高开发体验，同时确保生产环境获得最佳性能。

总结

理解VitePWA插件在不同环境下的行为差异是解决问题的关键。通过正确配置injectManifest选项和调整插件顺序，可以确保生产环境下资源预缓存按预期工作。开发环境下空数组的现象是特意设计的行为，不需要特别处理。