I am trying to send FCM to my react app using cloud functions. Cloud function is executing, but notification is not being received on client side.

Here cloud function code.

exports.sendPush = functions.database.ref('/settings2').onWrite(event => {
    let projectStateChanged = false;
    let projectCreated = false;
    let projectData = event.data.val();
    if (!event.data.previous.exists()) {
        projectCreated = true;
    }
    if (!projectCreated && event.data.changed()) {
        projectStateChanged = true;
    }
    let msg = 'A project state was changed';
        if (projectCreated) {
            msg = `The following new project was added to the project: ${projectData.title}`;
        }
    tokens.push("fIGxxxxGtDGxxxx DEVICE Token");
    let payload = {
        notification: {
            title: 'Firebase Notification',
            body: 'This Is Message',
            sound: 'default',
            badge: '1'
        }
    };
    return admin.messaging().sendToDevice(tokens, payload);
});

Here is the log of Cloud function

And here is code on my client side:

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

There are not any errors, but nothing is in console. Do I have to do something with service worker file?

Any help would be appreciated.

I am trying to send FCM to my react app using cloud functions. Cloud function is executing, but notification is not being received on client side.

Here cloud function code.

exports.sendPush = functions.database.ref('/settings2').onWrite(event => {
    let projectStateChanged = false;
    let projectCreated = false;
    let projectData = event.data.val();
    if (!event.data.previous.exists()) {
        projectCreated = true;
    }
    if (!projectCreated && event.data.changed()) {
        projectStateChanged = true;
    }
    let msg = 'A project state was changed';
        if (projectCreated) {
            msg = `The following new project was added to the project: ${projectData.title}`;
        }
    tokens.push("fIGxxxxGtDGxxxx DEVICE Token");
    let payload = {
        notification: {
            title: 'Firebase Notification',
            body: 'This Is Message',
            sound: 'default',
            badge: '1'
        }
    };
    return admin.messaging().sendToDevice(tokens, payload);
});

Here is the log of Cloud function

And here is code on my client side:

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

There are not any errors, but nothing is in console. Do I have to do something with service worker file?

Any help would be appreciated.

• javascript
• reactjs
• firebase
• firebase-cloud-messaging
• google-cloud-functions

Share Improve this question Follow edited Oct 2, 2017 at 12:14 KENdi 7,77922 gold badges1818 silver badges3131 bronze badges asked Oct 2, 2017 at 12:01 Noman AliNoman Ali 3,3401313 gold badges4747 silver badges7979 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

There was an issue with my firebase-messaging-sw.js file. I have resolved this by following code.

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

var config = {
    apiKey: "AIzaSyDtg4aQMQW67Jla1nUzrTTSEhVqpUeqKXI",
    authDomain: "payxxxxxxx.firebaseapp.",
    databaseURL: "https://pxyxxxxx.firebaseio.",
    projectId: "pxxoll-pxxxs-fxxx",
    storageBucket: "pxxx-pxxx-fxxxx1.apxxxot.",
    messagingSenderId: "2xxxx5xxx"
  };
  firebase.initializeApp(config);


const messaging = firebase.messaging();

For anyone new that may run across this post and are having issues with this especially if you copied and pasted something from online make sure you check the importScripts version and make sure its the same version as in your package.json file.

Example Currently this package version is 8.3.1

so update

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

to

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