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. P.s 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)

score 1 · Answer 1 · answered Feb 25 '22 at 10:07

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

Thankyou so much. This worked for me. I am able to access the variables as well. Thankyou so much — Bhushan Patil, Dec 07 '22 at 14:16

score 0 · Answer 2 · answered Nov 25 '20 at 20:10

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

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

Check my other answer for the implementation details.

score -2 · Answer 3 · answered Apr 07 '21 at 04:31

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

Well that is what I didn't want to do but ended up doing so. This answers defeats the purpose of the question, which is, utilizing the ENV to get these API keys and other values. I would have to switch codes every time I have to make changes to these. — Umer Qureshi, Apr 08 '21 at 07:01
If you found the some much better way it would be great to share it here. I'm also having this problem on my side. Than kyou. — Jaypee Tan, Apr 09 '21 at 08:26
Unfortunately i have not, i did find a way to send it through URL params but it wasn't being done as it was supposed to be so i switched back to just hard coded stuff. — Umer Qureshi, Apr 11 '21 at 06:11

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

3 Answers3