Fire-base web notification not received while no errors - firebase

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