6

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)
Umer Qureshi
  • 65
  • 6

2 Answers2

0

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.

Jonathan Morales Vélez
  • 1,776
  • 2
  • 22
  • 36
0

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();
Jaypee Tan
  • 75
  • 1
  • 9
  • 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