Fire-base web notification not received while no errors

Question

I am working with web app in which I want to integrate Firebase Notifications but after I setup all the requirements I tried to use Firebase notification composer to test it, I got no errors and the status of the message was completed but I received nothing neither on background nor in foreground.

here is my code

index.html

  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "MY_API_KEY",
        authDomain: "app.firebaseapp.com",
        databaseURL: "https://app.firebaseio.com",
        projectId: "app",
        storageBucket: "app.appspot.com",
        messagingSenderId: "MY_SENDER_ID"
      };
      firebase.initializeApp(config);

      var messaging = firebase.messaging();
      messaging.usePublicVapidKey("BLWwgk4yFuoNHdPDccuDnXYmhxZA8kwpWArWaE3t7njDT90-30dcWlJIhFbXxMpfXczcvtU8AvMf_F1EJg8Qy");
      messaging.requestPermission().then(function(res) {
        console.log('test')
        messaging.getToken().then(function(res){
          console.log(res)
        })
      })
      messaging.onTokenRefresh(function() {
        messaging.getToken()
        .then(function(refreshedToken) {
          console.log('Token refreshed.');
        })
        .catch(function(err) {
          console.log('Unable to retrieve refreshed token ', err);
        });
      });
      messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        // ...
      });
    </script>

firebase-messaging-sw.js

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


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

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
 const notificationTitle = 'Background Message Title';
 const notificationOptions = {
 body: 'Background Message body.',
 icon: '/firebase-logo.png'
};

 return self.registration.showNotification(notificationTitle,
  notificationOptions);
});

status of Firebase notification composer

Notes:

no errors on browser console.
no errors on Firebase console.

Answer 1

i had the same problem then i figured out that the version of firebase im using in the foreground is different than the version in sw, so i changed to the same version i use in the foreground and the problem is solved. Hope this help

Answer 2

I had the exact same problem. The problem was not in my front-end code at all but in the requests sent from firebase console. I would suggest you use Postman or your own backend to send a request to see if it works.

Heres a quick demo of my postman request -

method: POST

url : https://fcm.googleapis.com/fcm/send

Headers :

 "Content-Type": "application/json", 
 "Authorization": (Your server key which is found in Cloud messaging settings in firebase console) Edit: Make sure to add "key=" before your server key. Example - "Authorization" : "key=AAAA7_.......QRIM"

Body:

  "to" : (Your front end app token),
  "data" : {
            "body" : "Test message",
            "title" : "Test title"
           }

Hope this helps