Not receiving FCM Push Notification for web on localhost

Question

So I need to implement web push notifications in our web app, I have successfully setup the firebase cloud messaging in my app with the help of docs, I'm able to ask the user to allow permission for notifications and get the token id as well if he accepts the permission.

The thing is when I try to send a notification to test to the generated token, I'm getting a response that the message is sent, but I'm not able to receive it on the client side.

My index.html

<head>
  <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
  <link rel="manifest" href="./firebase.json">
</head>
 <script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) {
      console.log('Firebase Worker Registered');

    }).catch(function(err) {
      console.log('Service Worker registration failed: ', err);
    });
  }
  </script>

I'm successfully able to register the service worker file

My App.component.ts

var config = {
            apiKey: "somekey",
            authDomain: "someproject-2.firebaseapp.com",
            databaseURL: "https://someproject-2.firebaseio.com",
            projectId: "someproject-2",
            storageBucket: "",
            messagingSenderId: "someid"
          };
          firebase.initializeApp(config);



        const messaging = firebase.messaging();

        messaging.requestPermission()
        .then(function() {
          console.log('Notification permission granted.');
          return messaging.getToken()
        })
        .then(function(result) {
            console.log("The token is: ", result);
        })
        .catch(function(err) {
          console.log('Unable to get permission to notify.', err);
        });

        messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        });

I'm getting the permission dialog box asking permission and getting a token with this code

The curl code I used to send messages

curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "sometoken"
}' "https://fcm.googleapis.com/fcm/send"

I'm able to successfully send notifications with this code

I can't figure out where I'm going wrong, maybe because it's on localhost? maybe the onMessage method is not running properly? Any help is highly appreciated!

Service worker does not work on unsecure origins. so your localhost must have to be on https. — Touqeer Shafi, Oct 03 '17 at 13:50

score 17 · Accepted Answer · answered Oct 09 '17 at 09:42

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();

Thanks, you helped me! Although as of Aug 2022 there is a new version AND you have to use the `-compat.js` in importScripts: ``` importScripts('https://www.gstatic.com/firebasejs/9.9.3/firebase-app-compat.js') importScripts('https://www.gstatic.com/firebasejs/9.9.3/firebase-messaging-compat.js') ``` — Cory Robinson, Aug 30 '22 at 22:26

score 6 · Answer 2 · answered Mar 10 '18 at 12:26

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

thanks bro, i'm was also using wrong key, instead of server key i was using api key. Thanks again ! — , Mar 31 '18 at 06:03

score -1 · Answer 3 · answered Oct 03 '17 at 13:52

-1

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

answered Oct 03 '17 at 13:52

Touqeer Shafi

5,084
3
28
45

3

I don't think so, because I deployed the changes onto our staging website which was not https, and over there I was unable to register my service worker itself getting an error that the site is not https But however on the local, I'm able to register the service worker and get the token, this shows that it can be run on localhost and I remember the guy in firebase tutorials himself was doing it on his http localhost – Manzur Khan Oct 04 '17 at 04:31
1

Yup you're right, that because `localhost` is white listed in chrome, my mistake i agreed @ManzurKhanSarguroh – Touqeer Shafi Oct 04 '17 at 06:32
1

I appreciate you taking the time to answer bro – Manzur Khan Oct 04 '17 at 06:35

Not receiving FCM Push Notification for web on localhost

3 Answers3

Linked