VitePWA注入空数组至service-worker，如何配置缓存public目录资源？

你的问题核心是使用injectManifest策略时，VitePWA没有正确生成预缓存清单，导致self.__WB_MANIFEST为空数组。这是因为配置项层级错误，且未明确包含public目录资源，以下是修复方案：

问题原因 #

当启用strategies: 'injectManifest'自定义Service Worker时，Workbox的glob规则配置需要放在injectManifest字段下，而非顶层的workbox字段。原配置中globPatterns的位置不正确，且未覆盖public目录资源，导致没有匹配到任何可缓存资产。

修复后的Vite配置 #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import viteCompression from 'vite-plugin-compression';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  envPrefix: 'REACT_APP_',
  plugins: [
    svgr(),
    react(),
    VitePWA({
      srcDir: 'src',
      filename: 'service-worker.js',
      strategies: 'injectManifest',
      injectRegister: false,
      devOptions: {
        enabled: true,
        type: 'module',
      },
      // 关键：injectManifest策略下，Workbox配置需放在该字段内
      injectManifest: {
        globPatterns: [
          '**/*.{js,css,html}',
          'public/**/*' // 显式包含public目录下所有资产
        ],
        // 可选：排除不需要缓存的文件
        globIgnores: [
          '**/node_modules/**/*',
          'public/**/*.map'
        ]
      }
    }),
    viteCompression(),
  ],
});

补充说明 #

1. 你的Service Worker代码无需修改，只要配置正确，self.__WB_MANIFEST会自动注入包含所有匹配资产的数组。
2. public/**/*规则会覆盖该目录下所有类型的文件，若需要更精细控制，可替换为具体后缀，比如public/**/*.{ico,png,jpg,svg}。

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