Firebase web push notification sent successfully but not received by the client

Viewed 3737

I'm using firebase web push notifications API and sending post request with the message I want to display on the client-side with Postman and/or from the firebase notifications composer, the message is being sent successfully but it is not being received, how can I fix this?

This is the response I get

{
    "multicast_id": 6360733777037549929,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:1592759038463623%cc9b4facf9fd7ecd"
        }
    ]
}

I'm using Firebase hosting, and including the entire Firebase Javascript SDK, although I already tried including only firebase-messaging SDK.

  <body>
    <h1>Some Firebase app</h1>
    <script src="/__/firebase/7.15.3/firebase.js"></script>
    <script src="/__/firebase/init.js"></script>
    <script type="text/javascript">
      const messaging = firebase.messaging();
      messaging.requestPermission()
      .then(()=>{
        console.log('Permission Granted');
        return messaging.getToken()
      })
      .then((token)=>{
        console.log(token);
      })
      .catch((err)=>{
        console.log(err);
      })
      
      messaging.onMessage((payload) => {
        console.log('Message received. ', payload);
      });

    </script>
  </body>

With the token I get, and with my server key I send the following request

Method: POST
URL: https://fcm.googleapis.com/fcm/send
Headers: {
  Authorization: "key=myServerKey",
  Content-Type: "application/json"
  }
Body: {
  "to" : "token",
  "notification" : {
            "body" : "Test message",
            "title" : "Test title"
           }
  }

And this is how I handle the message on firebase-messaging-sw.js file

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

var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "newproject-95acc.firebaseapp.com",
  databaseURL: "https://newproject-95acc.firebaseio.com",
  projectId: "newproject-95acc",
  storageBucket: "newproject-95acc.appspot.com",
  messagingSenderId: "xxxx",
  appId: "xxxx"
};

firebase.initializeApp(firebaseConfig);

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
});
1 Answers

Which you want to receive message in the Foreground(has focus), or in the Background (service worker)?

in the Background (service worker)

Could you try the following code?

firebase-messaging-sw.js

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

var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "newproject-95acc.firebaseapp.com",
  databaseURL: "https://newproject-95acc.firebaseio.com",
  projectId: "newproject-95acc",
  storageBucket: "newproject-95acc.appspot.com",
  messagingSenderId: "xxxx",
  appId: "xxxx"
};

firebase.initializeApp(firebaseConfig);

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

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

If you set notification fields in your message payload, your setBackgroundMessageHandler callback is not called, and instead the SDK displays a notification based on your payload.

Or, Could you try samples?

See:

Related