在服务工作者中使用 .env 变量 - 使用 Firebase 创建 React 应用程序答案

【问题标题】：Use .env vars in service worker - Create React App with Firebase在服务工作者中使用 .env 变量 - 使用 Firebase 创建 React 应用程序
【发布时间】：2023-02-08 07:22:25
【问题描述】：

我将 React 与 create-react-app 一起使用，并且我已经集成了 Firebase Messaging 以进行推送通知，它要求您在公共文件夹 firebase-messaging-sw.js 中创建一个文件，该文件负责使用 firebase 消息传递来设置服务工作者以启用它。

一切正常，我的问题是直接在代码中使用 firebase 配置密钥，我知道它们是公钥，对它们进行硬编码仍然是一种非常糟糕的做法，而且我有多个环境（不同的 firebaseConfigs）所以它更令人沮丧使它们保持硬编码。

firebase-messaging-sw.js 看起来像这样：

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 = {
    apiKey: 'example',
    authDomain: 'example',
    databaseURL: 'example',
    projectId: 'example',
    storageBucket: 'example',
    messagingSenderId: 'example',
    appId: 'example',
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (message) {  
    return self.registration.showNotification(
        "Title",
        "Message"
    );
});

我见过像这样的其他问题How to use process.env in a React service worker

解决方案不起作用，cra-append-sw 库导致 babel 和 webpack 错误（其他库由 CRA 处理，所以我不会惹他们）

我的react-scripts版本是4.0.3

【问题讨论】：

标签： reactjs firebase firebase-cloud-messaging create-react-app service-worker

【解决方案1】：

我没有实际答案，但我遇到了同样的问题，我一直在尝试使用 getToken() 函数。如果您查看the docs，您可以使用可选参数 ServiceWorkerRegistration 来设置自定义服务工作者。

const swRegistration = await navigator.serviceWorker.register('/src/firebase-messaging-sw.js');
const token = await fcm.getToken({
      serviceWorkerRegistration: swRegistration,
    });

现在 service worker 可以位于 src 目录中，它将被构建在那里，你可以在那里使用 env 变量。问题是，如果这样做，我在注册 service worker 时会收到 mimetype 错误。您可以在 last answer of this forum 中看到为什么会出现此错误。也许您可以以此为基础并找到解决方案，祝您好运！

【讨论】：