0

Depending on the environment, I have two different configurations I would like to use (test and prod). Unfortunately, firebase only works with the one service worker in the domain root folder (/firebase-messaging-sw.js). The dev environment is in a subfolder of the domain.

What I tried is sending a message to the sw as soon as it is registered and ready with the correct config - that works. However, initializing the firebase app throws warnings if it is not done immediately (don't know why that is) and the listener messaging.onBackgroundMessage stops working.

Warnings in Console from Firebase

(.../firebasejs/messaging/src/helpers/register.ts)

  1. register.ts:80 Event handler of 'push' event must be added on the initial evaluation of worker script.
  2. register.ts:83 Event handler of 'pushsubscriptionchange' event must be added on the initial evaluation of worker script.
  3. register.ts:86 Event handler of 'notificationclick' event must be added on the initial evaluation of worker script.

app.js

Sending the config

navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then(() => navigator.serviceWorker.ready)
  .then(reg => reg.active.postMessage({ firebaseConfig }))

firebase-messaging-sw.js

This gets me the right config, but initializing firebase fails

self.addEventListener('message', ({ data }) => {
  if(data?.firebaseConfig)
    initFirebaseMessaging(data.firebaseConfig);
});

And this is the main part of initializing firebase

importScripts('https://www.gstatic.com/firebasejs/9.21.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.21.0/firebase-messaging-compat.js');

const initFirebaseMessaging = function(config){
   firebase.initializeApp(config);
   const messaging = firebase.messaging();
   messaging.onBackgroundMessage(message => { ... });
};

When I hard code the config for one environment in the sw file and call initFirebaseMessaging(...) right away after importing the scripts, everything works fine.

8
  • 1
    "but initializing firebase fails" - What exactly is the error? Please edit the question to be clear what you're observing. Commented Aug 4 at 20:19
  • @DougStevenson Updated the question as requested, does this help? Commented Aug 5 at 10:00
  • @DougStevenson I could live with the warnings, but messaging.onBackgroundMessage stops working when they appear. Commented Aug 5 at 10:09
  • The error message suggests that what you're trying to do - lazy init of FCM in a service worker - isn't allowable. Commented Aug 5 at 12:46
  • @DougStevenson Well that's a bumber. I'm sure they have their reasons. But how am I going to let the service worker know which config it should use then? I can't send it as an URL parameter register('/firebase-messaging-sw.js?config=test') for example, can I? Or can I use a variable defined somewhere else? Commented Aug 5 at 16:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.