在React Boilerplate的firebase-messaging-sw.js中利用环境变量

问题描述

这是我的firebase-messaging-sw.js文件。我需要的是从我的.env文件中获取环境变量。直接或间接。我尝试了其他可用的答案，但无济于事。我正在使用React样板，而这些答案对我来说并不匹配。有没有办法我可以拿到这些？任何帮助将不胜感激。

现在的代码：

 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp({
        apiKey: `AIz.....Cvg5E_Q`,authDomain: `example.firebaseapp.com`,databaseURL: `https://example.firebaseio.com`,projectId: `projectid`,storageBucket: `example.com`,messagingSenderId: `1...7`,appId: `1..............30`,})

首选方法是从.env或某些变量进行访问。通过导入或其他方式。 Pss 导入并且要求在此服务程序中不起作用。

 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp(firebaseConfig)

解决方法

我提交了解决此here问题的答案。总之，您需要：

1. 创建2个.env文件
2. 使用环境变量在根文件夹中创建firebase-messaging-sw.js文件
3. 安装cra-append-sw
4. 将pre脚本添加到您的package.json

检查my other answer以获得实施详细信息。

,

我认为这是最简单的实现方式，但这会暴露您的 API 密钥。

    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 firebaseConfigDev = {
        apiKey: `AIz.....Cvg5E_Q`,authDomain: `example.firebaseapp.com`,databaseURL: `https://example.firebaseio.com`,projectId: `projectid`,storageBucket: `example.com`,messagingSenderId: `1...7`,appId: `1..............30`,};
    const firebaseConfigProd = {
        apiKey: `AIz.....Cvg5E_Q`,};
    
    const isProd = this.location.origin.includes("yourdomain.com");

// Initialize Firebase
firebase.initializeApp(isProd ? firebaseConfigProd : firebaseConfigDev);
const messaging = firebase.messaging();