如何在Create React App中创建独立的PWA路由端点？

1. 新增PWA专属的入口文件与HTML模板 #

• 在public目录下创建pwa.html，作为PWA页面的独立模板（复制index.html后修改，替换title、引入专属manifest等）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="独立PWA页面" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/pwa-icon-192x192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/pwa-manifest.json" />
    <title>My PWA App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

• 在src目录下创建pwa.js，作为PWA页面的入口文件，仅在此注册专属Service Worker：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import PwaApp from './PwaApp'; // 你的PWA页面组件

// 仅在PWA路由下注册专属Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker-pwa.js')
      .then(reg => console.log('PWA Service Worker已注册:', reg))
      .catch(err => console.error('PWA Service Worker注册失败:', err));
  });
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <PwaApp />
  </React.StrictMode>
);

• 在src目录下创建PwaApp.js，编写你的PWA页面内容：

import React from 'react';

function PwaApp() {
  return (
    <div className="App">
      <h1>这是独立的PWA页面</h1>
      {/* 你的PWA功能代码 */}
    </div>
  );
}

export default PwaApp;

2. 修改Webpack配置支持多入口 #

默认CRA隐藏了Webpack配置，我们用react-app-rewired来修改：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 修改package.json中的scripts：

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

• 在项目根目录创建config-overrides.js，配置多入口与HTML生成规则：

const { override, addEntry, adjustHtmlWebpackPlugin } = require('customize-cra');

module.exports = override(
  // 添加PWA入口
  addEntry({
    pwa: './src/pwa.js'
  }),
  // 生成pwa.html并关联pwa入口chunk
  adjustHtmlWebpackPlugin(htmlPlugin => {
    const pwaHtmlConfig = {
      ...htmlPlugin.options,
      filename: 'pwa.html',
      chunks: ['pwa']
    };
    return [htmlPlugin, pwaHtmlConfig];
  }),
  // 配置开发服务器路由转发
  (config) => {
    if (config.devServer) {
      config.devServer.historyApiFallback = {
        rewrites: [
          { from: /^\/pwa$/, to: '/pwa.html' },
          { from: /^\/pwa\/.*$/, to: '/pwa.html' }
        ]
      };
    }
    return config;
  }
);

3. 配置PWA专属资源 #

• 在public目录下创建pwa-manifest.json，定义PWA的启动参数：

{
  "short_name": "MyPWA",
  "name": "独立PWA应用",
  "icons": [
    {
      "src": "/pwa-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/pwa-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/pwa",
  "display": "standalone",
  "theme_color": "#2196F3",
  "background_color": "#ffffff"
}

• 在public目录下创建service-worker-pwa.js，编写专属缓存策略：

const CACHE_NAME = 'pwa-cache-v1';
// 缓存PWA页面所需资源（打包后文件名会带hash，需根据实际调整）
const CACHE_ASSETS = [
  '/pwa',
  '/pwa.html',
  '/static/js/pwa.[hash].js',
  '/static/css/pwa.[hash].css',
  '/pwa-manifest.json',
  '/pwa-icon-192x192.png',
  '/pwa-icon-512x512.png'
];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_ASSETS))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== CACHE_NAME).map(name => caches.delete(name))
      );
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(res => res || fetch(e.request))
  );
});

4. 生产环境部署配置 #

以Nginx为例，需配置路由转发：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/build/folder;

  # 主应用路由
  location / {
    try_files $uri /index.html;
  }

  # PWA页面路由
  location /pwa {
    try_files $uri /pwa.html;
  }
}

关键注意事项 #

• 主应用不要注册全局Service Worker，避免影响PWA页面
• PWA的缓存资源需与主应用完全隔离，防止缓存冲突
• 开发环境下需重启npm start使配置生效

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