如何将React.js + Vite开发的应用配置为PWA？

你已经完成了基础文件的创建，接下来按以下步骤完成配置：

1. 安装 Workbox CLI #

要基于你的workbox-config.js生成 Service Worker，先局部安装 Workbox CLI（推荐）：

npm install workbox-cli --save-dev

2. 添加构建 Service Worker 的脚本 #

在项目根目录的package.json中，新增或修改构建脚本，确保每次构建后自动生成 Service Worker：

{
  "scripts": {
    "build": "react-scripts build && workbox generateSW workbox-config.js"
  }
}

3. 注册 Service Worker #

在 React 项目的入口文件（如src/index.js）中，添加注册逻辑，建议只在生产环境执行：

if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker 注册成功:', reg))
      .catch(err => console.log('Service Worker 注册失败:', err));
  });
}

4. 校验 manifest.json 配置 #

确保你的manifest.json包含核心必要字段，示例配置：

{
  "name": "我的 React PWA",
  "short_name": "React PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

同时要在public/index.html中正确引入：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

5. 构建并测试 #

运行构建命令生成生产包：

npm run build

用静态服务器启动dist目录（如npx serve dist），在浏览器中打开后，通过开发者工具的Application面板，检查Service Workers和Manifest是否正常加载，测试离线访问、添加到主屏等PWA核心功能。

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