how to receive notification payload from cloud function to website using javascript

Question

I am currently learning firebase cloud functions and firebase cloud messaging so I am fairly new to cloud functions and FCM on the web. How can I be able to receive a notification payload from a cloud function and display that notification on the web page? I would like to utilise Firebase Cloud Messaging to do so. So far the documents are kind of confusing for me. The website is using Javascript. The code of the cloud function is below:


'use-strict'

const functions = require('firebase-functions');
const admin = require ('firebase-admin');
admin.initializeApp();


exports.sendNotification = functions.firestore.document("Employee_Details/{user_id}/Notifications/{notification_id}")
.onWrite((change , context) =>{

  const user_id = context.params.user_id;
  const notification_id = context.params.notification_id;

  //console.log("User ID:" + user_id + "| Notification ID : " + notification_id);

  return admin.firestore().collection("Employee_Details").doc(user_id)
  .collection("Notifications").doc(notification_id).get().then(queryResult => {

    const from_user_id = queryResult.data().from;
    const from_description = queryResult.data().description;
    const from_incident = queryResult.data().incident;
    const receiver_id = queryResult.data().myId;

    const from_data = admin.firestore().collection("Employee_Details").doc(from_user_id).get();
    const to_data = admin.firestore().collection("Employee_Details").doc(user_id).get();

  //  console.log("FROM_DAT:" + from_data + "TO_DATA:" + to_data);


    return Promise.all([from_data , to_data]).then(result => {


      const from_name = result[0].data().first_name;
      const to_name =  result[1].data().first_name;
      const token_id = result[1].data().token_id;

      const payload = {
        notification: {
          title:"Notification from :" + from_name,
          body :from_incident + ":" +from_description,
          icon : "default",


        },

        data:{
          message: from_description,
          from_user_id : from_user_id,
          receiver_id : receiver_id
        }

      };

      return admin.messaging().sendToDevice(token_id , payload).then(reuslt =>{

      return  console.log("Notification sent.");


      });


    });


  });






});

Is your question about how to display an FCM message in your app? Is this doc what you are looking for: firebase.google.com/docs/cloud-messaging/js/receive ? — Renaud Tarnec
The question is how can I retrieve the notification payload as shown in the node.js code above from the cloud function service then display that notification on my web app. I would like to use FCM — James Gitonga
Sorry but your goal is not clear for me: Do you want to send an FCM message from a Cloud Function and upon reception by the user, display it in a web app. If this is your goal, IMHO the doc I mentioned above is containing the answer. If your goal is different, please share more details. — Renaud Tarnec
I am using cloud function triggers so as to trigger these notifications. So I want to pass that notification payload i.e the message and the sender id from cloud functions — James Gitonga

James Gitonga James Gitonga · Accepted Answer · 2020-06-30T10:37:02

messaging.setBackgroundMessageHandler(function(payload) {
   console.log('[firebase-messaging-sw.js] Received background message ', payload);
   // Customize notification here
   const notificationTitle = 'Background Message Title';
   const notificationOptions = {
     body: 'Background Message body.',
     icon: '/firebase-logo.png'
   };
 
   return self.registration.showNotification(notificationTitle,
     notificationOptions);
 });

how to receive notification payload from cloud function to website using javascript

1 Answers