Is there a way to add configuration based on environment for firebase in Angular

Question

Is there a way to add configuration based on the environment for firebase in Angular?

I have different firebase projectIds and messagingSenderIds for Dev environment and Prod Environment. I want to use this different configuration in my firebase_messaging_sw.js I am doing for background Notifications in my app. Below is the code.

importScripts("https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js");
// For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
importScripts("https://www.gstatic.com/firebasejs/8.2.7/firebase-analytics.js");

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  messagingSenderId: 'xxxxxxxx',
  apiKey: 'xxxxxxxxxxxx',
  projectId: 'xxxxxxxx',
  appId: 'xxxxxxxxxxx',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
    console.log(
      "[firebase-messaging-sw.js] Received background message ",
      payload,
    );

    let notificationBody;
    if (payload && payload.data && payload.data.notification) {
      notificationBody = JSON.parse(payload.data.notification);
    }

    if (notificationBody) {
      return self.registration.showNotification(
        notificationBody.title,
        {body: notificationBody.body, icon: notificationBody.icon, image: notificationBody.image},
      );
    }
  }
);

Here, I wish to use different firebaseConfig based on the environment. I have tried to import the environment which gave the below error.

Cannot use import statement outside a module

I also tried using file replacement in angular.json similar to the environment file but it also didn't work.

Please help me with these.

Answer 1

For some reason, Firebase always looks for the firebase-messaging-sw.js file in the root of the directory. Hence we could not change the name or location of this file.

So I found a way around this. Create 2 copies of the same file and store it in a different directory. In my case, I have create a directory named service-worker and inside it created 2 directories named dev and prod. Below is my directory structure.

src
|---> service-worker
      |----> dev
      |----> prod

then copied firebase-messaging-sw.js to the dev and prod folder. Updated files on both folder with the environment specific configuration (hard-coded)

firebase.initializeApp({
  messagingSenderId: 'xxxxxxxx',
  apiKey: 'xxxxxxxxxxxx',
  projectId: 'xxxxxxxx',
  appId: 'xxxxxxxxxxx',
});

In angular.json add below changes.

configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "assets": [
                "src/favicon.ico",
                "src/assets",
                "src/manifest.json",
                {
                  "glob": "firebase-messaging-sw.js",
                  "input": "src/service-worker/prod",
                  "output": "/"
                }
              ],
....

Do the same for dev configuration.

What it does is pick up file or files mentioned under glob for input location and copy it to the output location.

Then run and test whether your service worker has proper configuration.

Hopefully this helps some one.