Utilizing environment variables in firebase-messaging-sw.js in React Boilerplate

Question

This is my firebase-messaging-sw.js file. What i require is to fetch environment variables from my.env file. Either directly or indirectly. I have tried other answers available here but to no avail. I am using React boilerplate and those answers just don't match up for me. Is there a way i could fetch these? Any help would be appreciated.

Code right now:

 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`,
    })

Preferred way is to have it access from.env or some variable. By either importing or whatever. Ps Imports and require don't work in this 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

In case if anyone is looking for an angular solution.

Create environment file for firebase in the environments folder

eg. src/environments/fb-prod.ts

And add your firebase content there

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"
}

Now create a script in your package.json . This script will create a file fb-config.js in assets/stubs/ folder.

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

And, run this script before you run your build.

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

In the firebase-messaging-sw.js file

change the following

// 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: "-"
});

to

// 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);

Answer 2

I submitted an answer to solve this here . In summary you need to:

1. Create 2 .env files
2. Create a firebase-messaging-sw.js file in the root folder using your env vars
3. Install cra-append-sw
4. Add pre scripts to your package.json

Check my other answer for the implementation details.

Answer 3

I think the easiest way to implement this but this will expose your API keys.

    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();