Not receiving FCM Push Notification for web on localhost

Alright, I didn't get any answers for this on stackoverflow, so I have to do it on my own and got it working!

The problem was in the service worker file, I have apparently not defined messaging variable.

If anybody is facing this issue, just make sure your service worker file looks something like this.

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');firebase.initializeApp({    'messagingSenderId': '182145913801'  });const messaging = firebase.messaging();

I had a similar issue and I went to cloud messaging on firebase and got my Server key and added that to the curl request.

curl --header  "Authorization: key=CloudMessagingServerKey" --header  "Content-Type: application/json" -d '{     "notification": {        "title": "FCM Message",        "body": "This is an FCM Message",      },     "to": "token from messaging.getToken()"     }' "https://fcm.googleapis.com/fcm/send"

and my firebase-messaging-sw.js looked like the code below

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({  apiKey: 'yourapikey',  authDomain: 'xxxx.firebaseapp.com',  databaseURL: 'https://xxxx.firebaseio.com',  projectId: 'xxxx',  storageBucket: 'xxxx.appspot.com',  messagingSenderId: 'your message sender Id',});const messaging = firebase.messaging();

That did the trick for me. My errors were I was using a wrong serverKey and I did not use importScripts in my firebase-messaging-sw.js

As stated on FCM website:

The FCM SDK is supported only in pages served over HTTPS. This is due to its use of service workers, which are available only on HTTPS sites.

See https://firebase.google.com/docs/cloud-messaging/js/client