I am able to send, view and click on web notifications fine, and nothing appears wrong. However the console yields this when I click on a notification

Uncaught FirebaseError: Messaging: Missing App configuration value: "projectId" (messaging/missing-app-config-values).

projectId is definitely being passed to the configuration

Chrome version: Version 79.0.3945.130 (Official Build) (64-bit)

here is how I am configuring firebase:

var messaging;
if( firebase.messaging.isSupported() ){

    var config = {
      apiKey: "*************",
      authDomain: "*************",
      databaseURL: "*************",
      projectId: "*************",
      storageBucket: "*************",
      messagingSenderId: "*************",
      appId: "*************"
    };
    firebase.initializeApp(config);
    messaging = firebase.messaging();
    messaging.usePublicVapidKey("*************");
    messaging.onMessage(function(payload) {
        ...
        ...
    }
}

And my firebase-messeging-sw.js:

self.addEventListener('notificationclick', function(event) {
    ...
    ...
}
importScripts('.8.2/firebase-app.js');
importScripts('.8.2/firebase-messaging.js');

firebase.initializeApp({'messagingSenderId': '***********'});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    ...
});

Any ideas?

I am able to send, view and click on web notifications fine, and nothing appears wrong. However the console yields this when I click on a notification

Uncaught FirebaseError: Messaging: Missing App configuration value: "projectId" (messaging/missing-app-config-values).

projectId is definitely being passed to the configuration

Chrome version: Version 79.0.3945.130 (Official Build) (64-bit)

here is how I am configuring firebase:

var messaging;
if( firebase.messaging.isSupported() ){

    var config = {
      apiKey: "*************",
      authDomain: "*************",
      databaseURL: "*************",
      projectId: "*************",
      storageBucket: "*************",
      messagingSenderId: "*************",
      appId: "*************"
    };
    firebase.initializeApp(config);
    messaging = firebase.messaging();
    messaging.usePublicVapidKey("*************");
    messaging.onMessage(function(payload) {
        ...
        ...
    }
}

And my firebase-messeging-sw.js:

self.addEventListener('notificationclick', function(event) {
    ...
    ...
}
importScripts('https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.2/firebase-messaging.js');

firebase.initializeApp({'messagingSenderId': '***********'});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    ...
});

Any ideas?

• javascript
• firebase
• google-cloud-messaging

3 Answers 3

You have to call initializeApp() before calling any other Firebase APIs. Your code is calling firebase.messaging.isSupported() first before initializeApp(). It looks like perhaps you only want to initialize Firebase if FCM is going to work, but that's simply not supported. I suggest initializing Firebase unconditionally. There is very little cost to doing so if you don't actually make use of any of the Firebase products.

I fixed this by re-getting my app's config snippet from here https://support.google.com/firebase/answer/7015592 and paste it again as my initializeApp object parameter. It was apparently caused by a Firebase upgrade.

I was able to fix this by modifying the service worker with config details.

Initializing using the config file

I fixed this issue by giving the congig values inside the service worker itself.

for that copy your config files from environment.ts file or from FCM console -> <your-project> ->

-> project settings -> scroll down to your apps ->

click on <your-app> -> copy the config.

now paste this config in firebase-messaging-sw.ts inside the firebase.initializeApp() as

firebase.initializeApp({
  'messagingSenderId': 'xxxxxxxxxxxxxx',
  'apiKey': "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  'authDomain': "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  'databaseURL': "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  'projectId': "xxxxxxxxxxxxxx",
  'storageBucket': "xxxxxxxxxxxxxx",
  'messagingSenderId': "599149435887",
  'appId': "x:xxxxxxxxxxxxxx:xxx:xxxxxxxxxxxxxx",
  'measurementId': "xxxxxxxxxxxxxx"
});

this worked for me, hope it work for you too.

ALternative method (long shot, not sure if works)

one other thing worked for is that reducing the version in

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

to

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

but in this case I couldn't get any notification, maybe if it works for you, you can use this also.