React PWA（CRA创建）如何将locales JSON文件加入Service Worker预缓存？

下面提供两种无需 eject 和 eject 后的解决方案，按需选择：

方案一：不 eject，用 react-app-rewired 扩展配置 #

这种方法无需 eject 项目，通过修改 webpack 配置扩展 Workbox 预缓存规则：

1. 安装依赖

npm install react-app-rewired workbox-webpack-plugin --save-dev

2. 项目根目录创建 config-overrides.js 文件，写入以下配置：

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    // 移除 CRA 默认的 GenerateSW 插件
    const workboxPluginIndex = config.plugins.findIndex(
      plugin => plugin.constructor.name === 'GenerateSW'
    );
    if (workboxPluginIndex !== -1) {
      config.plugins.splice(workboxPluginIndex, 1);
    }

    // 添加自定义 InjectManifest 插件，指定预缓存包含 locales 下的 JSON 文件
    config.plugins.push(
      new InjectManifest({
        swSrc: './src/service-worker.js', // 自定义 Service Worker 文件路径
        swDest: 'service-worker.js',
        include: [/\.html$/, /\.js$/, /\.css$/, /locales\/.*\.json$/], // 匹配 locales 下所有 JSON
      })
    );
  }
  return config;
};

3. 在 src 目录下创建 service-worker.js 文件，基础内容如下：

import { precacheAndRoute } from 'workbox-precaching';

// Workbox 会自动注入预缓存清单到 self.__WB_MANIFEST
precacheAndRoute(self.__WB_MANIFEST);

4. 修改 package.json 中的 scripts 命令，替换为 react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

5. 重新执行 npm run build，构建后 locales 下的 JSON 文件会被加入预缓存清单。

方案二：已 eject 项目，直接修改 webpack 配置 #

如果已经执行过 npm run eject，可以直接修改生产环境的 webpack 配置：

1. 打开 config/webpack.config.prod.js，找到 WorkboxWebpackPlugin.GenerateSW 的配置项。

2. 修改配置，添加 include 规则或者 additionalManifestEntries：

• 方式一：用 include 匹配所有 locales 下的 JSON

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  exclude: [/\.map$/, /asset-manifest\.json$/],
  include: [/\.html$/, /\.js$/, /\.css$/, /locales\/.*\.json$/], // 新增这一行
  runtimeCaching: [
    // 原有 runtimeCaching 配置
  ],
})

• 方式二：手动指定需要缓存的 JSON 文件（适合文件数量少的情况）

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  exclude: [/\.map$/, /asset-manifest\.json$/],
  additionalManifestEntries: [
    { url: '/locales/en.json', revision: '1' }, // 替换为你的实际文件路径和版本号
    { url: '/locales/zh.json', revision: '1' },
  ],
  runtimeCaching: [
    // 原有 runtimeCaching 配置
  ],
})

3. 重新执行 npm run build 即可生效。

注意事项 #

• 确保构建后的 build/locales 目录下确实存在对应的 JSON 文件，路径匹配规则要和实际文件路径一致。
• 如果你的 JSON 文件是通过动态导入加载的，也可以考虑用 Workbox 的 runtimeCaching 配置做运行时缓存，但预缓存更适合离线优先的场景。

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