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

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(`.17.1/firebase-app.js`)
 importScripts(`.17.1/firebase-messaging.js`)
    
    firebase.initializeApp({
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp`,
        databaseURL: ``,
        projectId: `projectid`,
        storageBucket: `example`,
        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(`.17.1/firebase-app.js`)
 importScripts(`.17.1/firebase-messaging.js`)
    
    firebase.initializeApp(firebaseConfig)

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./firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic./firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp({
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp.`,
        databaseURL: `https://example.firebaseio.`,
        projectId: `projectid`,
        storageBucket: `example.`,
        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./firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic./firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp(firebaseConfig)

• javascript
• reactjs
• firebase-cloud-messaging
• service-worker
• react-boilerplate

Share Follow edited Oct 16, 2020 at 10:42 Umer Qureshi asked Aug 28, 2020 at 11:37 Umer QureshiUmer Qureshi 12511 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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./firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic./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./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./firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic./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./docs/web/setup#config-object
firebase.initializeApp(config);

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.

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

    importScripts('https://www.gstatic./firebasejs/8.2.0/firebase-app.js');
    importScripts('https://www.gstatic./firebasejs/8.2.0/firebase-messaging.js')
    const firebaseConfigDev = {
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp.`,
        databaseURL: `https://example.firebaseio.`,
        projectId: `projectid`,
        storageBucket: `example.`,
        messagingSenderId: `1...7`,
        appId: `1..............30`,
    };
    const firebaseConfigProd = {
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp.`,
        databaseURL: `https://example.firebaseio.`,
        projectId: `projectid`,
        storageBucket: `example.`,
        messagingSenderId: `1...7`,
        appId: `1..............30`,
    };
    
    const isProd = this.location.origin.includes("yourdomain.");

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