当前位置：首页 > React

react 实现pwa

2026-01-26 15:57:22React

React 实现 PWA 的步骤

使用 Create React App (CRA) 初始化项目

Create React App 内置了对 PWA 的支持，只需在初始化项目时添加模板即可：

npx create-react-app my-pwa --template cra-template-pwa

配置 Service Worker

CRA 生成的 src/index.js 文件中默认注释了 Service Worker 注册代码，取消注释即可启用：

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

serviceWorkerRegistration.register();

自定义 manifest.json

修改 public/manifest.json 文件以定义应用名称、图标等元数据：

{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

优化离线体验

在 src/serviceWorkerRegistration.js 中可自定义缓存策略：

react 实现pwa

export function register(config) {
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
      navigator.serviceWorker.register(swUrl).then(registration => {
        registration.update();
      });
    });
  }
}

添加安装提示

在 React 组件中添加监听 beforeinstallprompt 事件：

useEffect(() => {
  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    setDeferredPrompt(e);
  });
}, []);

构建生产环境

PWA 功能需要在 HTTPS 环境下测试，使用以下命令构建：

npm run build
serve -s build

验证 PWA 功能

使用 Lighthouse 工具进行验证：

react 实现pwa

在 Chrome 开发者工具中选择 Lighthouse
勾选 PWA 选项
运行测试确保所有核心指标通过

高级自定义

如需更精细控制，可手动配置 webpack：

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      plugins: [
        new WorkboxWebpackPlugin.InjectManifest({
          swSrc: './src/sw.js',
          swDest: 'service-worker.js'
        })
      ]
    }
  }
}

更新策略

在 src/sw.js 中实现自定义缓存策略：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/static/js/main.chunk.js'
      ]);
    })
  );
});