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

2 Answers 2

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