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

Question

这是我的 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 或某个变量访问它。通过导入或其他方式。 P.s Imports 和 require 在此 Service Worker 中不起作用。

 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)

Answer 1

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

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

查看my other answer了解实施细节。

Answer 2

我认为最简单的方法是实现这一点，但这会暴露你的 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`,
        authDomain: `example.firebaseapp.com`,
        databaseURL: `https://example.firebaseio.com`,
        projectId: `projectid`,
        storageBucket: `example.com`,
        messagingSenderId: `1...7`,
        appId: `1..............30`,
    };
    
    const isProd = this.location.origin.includes("yourdomain.com");

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

Answer 3

如果有人正在寻找角度解决方案。

在环境文件夹中为firebase创建环境文件

例如。 src/environments/fb-prod.ts

并在那里添加您的 Firebase 内容

var configProd: any = {
    "apiKey": "PROD-KEY",
    "authDomain": "PROD-DOMAN",
    "projectId": "PROD-ProjId",
    "storageBucket": "PROD-s-bucket",
    "messagingSenderId": "PROD-msgSenderId",
    "appId": "PROD-appId",
    "measurementId": "PROD-measurementId"
}

现在在您的package.json 中创建一个脚本。该脚本将在 assets/stubs/ 文件夹中创建一个文件fb-config.js。

"fb-config-prod": "tsc -out src/assets/stubs/fb-config.js src/environments/fb-prod.ts --module amd"

并且，在运行构建之前运行此脚本。

"build:prod": "npm run fb-config-prod; ng build --configuration=production",

在firebase-messaging-sw.js 文件中

更改以下内容

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: "-",
  authDomain: "-",
  projectId: "-",
  storageBucket: "-",
  messagingSenderId: "-",
  appId: "-",
  measurementId: "-"
});

到

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

importScripts('/assets/stubs/fb-config.js');

const config = configLocal || configDev || configProd;

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp(config);