在Create React App+Firebase的Service Worker中使用.env环境变量

针对你用react-scripts@4.0.3构建的项目，不想改动CRA内置的Webpack/Babel配置，同时要解决Firebase配置硬编码、多环境维护繁琐的问题，推荐以下无需修改CRA核心配置的方案：

步骤1：配置环境变量 #

在项目根目录创建对应环境的.env文件（比如.env.development、.env.production），将Firebase配置项以REACT_APP_前缀定义：

# .env.production示例
REACT_APP_FIREBASE_API_KEY=你的生产环境API密钥
REACT_APP_FIREBASE_AUTH_DOMAIN=你的生产环境Auth域名
REACT_APP_FIREBASE_DATABASE_URL=你的生产环境数据库URL
REACT_APP_FIREBASE_PROJECT_ID=你的生产环境项目ID
REACT_APP_FIREBASE_STORAGE_BUCKET=你的生产环境存储桶
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=你的生产环境消息发送者ID
REACT_APP_FIREBASE_APP_ID=你的生产环境App ID

步骤2：编写自动生成Service Worker的脚本 #

在项目根目录创建scripts/generate-firebase-sw.js脚本，用于读取环境变量并生成public/firebase-messaging-sw.js：

const fs = require('fs');
const path = require('path');

// 从环境变量中读取Firebase配置
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

// 构造Service Worker内容
const swContent = `importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

const firebaseConfig = ${JSON.stringify(firebaseConfig, null, 4)};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (message) {  
    return self.registration.showNotification(
        message.notification.title || "默认标题",
        message.notification.options || { body: "默认消息内容" }
    );
});
`;

// 将内容写入public目录下的Service Worker文件
const targetPath = path.join(__dirname, '../public/firebase-messaging-sw.js');
fs.writeFileSync(targetPath, swContent);
console.log('✅ 已根据当前环境生成firebase-messaging-sw.js');

步骤3：配置NPM脚本钩子 #

修改package.json的scripts字段，添加prestart和prebuild钩子，让脚本在启动或构建项目前自动执行：

{
  "scripts": {
    "prestart": "node scripts/generate-firebase-sw.js",
    "prebuild": "node scripts/generate-firebase-sw.js",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

步骤4：忽略自动生成的文件 #

将自动生成的firebase-messaging-sw.js添加到.gitignore，避免提交到版本库：

public/firebase-messaging-sw.js

方案优势 #

• 完全遵循CRA的环境变量规范，无需修改内置Webpack/Babel配置
• 多环境配置通过.env文件管理，维护更清晰
• 利用NPM预钩子自动生成Service Worker，无需手动操作

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