fcm onmessage not triggered

Question

I see this question is repeatedly asked, I went through many posts yet failed to achieve it with 9.6.1

I get a notification on my windows notification bar. What I need is to log the message in the console and later do some action on it.

Requirement: When a message is pushed to the client using the token from the server. That particular client shall receive the data and using that data I was thinking to show a custom popup/modal. Is this achievable using FCM?

below is what I configured on a page.

<script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
        import {getToken,onMessage} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js";
        import {getMessaging,onBackgroundMessage } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging-sw.js";
        console.log(Notification.permission);
        if (Notification.permission == 'granted') {
            loadFCM();
        }
        function loadFCM(p){
            console.log(p);
            // TODO: Add SDKs for Firebase products that you want to use
            // https://firebase.google.com/docs/web/setup#available-libraries
            // Your web app's Firebase configuration
            // For Firebase JS SDK v7.20.0 and later, measurementId is optional
            const firebaseConfig = {
            apiKey: "esdfdsgdsg",
            authDomain: "sdgsdgsdg",
            projectId: "sgsdgsdgds",
            storageBucket: "sgdsgdsgds",
            messagingSenderId: "sdgdsgsdg",
            appId: "1:sgdgs:web:sgdgdsg",
            measurementId: "G-sgdgdsdg"
            };
            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const messaging = getMessaging(app);
            console.log(messaging);
            getToken(messaging, { vapidKey: 'sdgdsgsd-sdgdgsdggds' }).then((currentToken) => {
                if (currentToken) {
                    console.log('token to send...'+currentToken);
                } else {
                    // Show permission request UI
                    console.log('No registration token available. Request permission to generate one.');
                }
                }).catch((err) => {
                console.log('An error occurred while retrieving token. ', err);
            });
            onMessage(messaging, (payload) => {
                console.log('Message received. ', payload);
                messaging.setBackgroundMessageHandler(payload => {
                    console.log(payload);
                    const title = payload.data.title;
                    const options = {
                        body: payload.data.score
                    };
                    return self.registration.showNotification(title, options);
                });
            });
            onBackgroundMessage(messaging, (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'
                };
                self.registration.showNotification(notificationTitle, notificationOptions);
            });
            
        }

      </script>

Using postman I send below request. Please tell me what am I doing wrong here.

  URL POST : https://fcm.googleapis.com/fcm/send
    {
        "data": {
            "title": "test",
            "body": "test",
        "click_action": "http://localhost:8001/"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://domain.in"
      }
    },
    "notification":{  
    "title":"mytitle",
    "body":"mybody",
    "content_available": true   },
    "to": "dMNS-tergdrgd-PPMcqiCseoE3fLIQYAL9KbCxlnKcN2yQ1VV" }

Answer 1

So the problem here is when ever the your notification is properly arranged / designed i.e. it looks some thing like :

{
    "notification": {  
        "title": "mytitle",
        "body": "mybody",
        "content_available": true 
    }  
}

It considers it as a notification and onMessage is never called. So instead send your data in data key only.

In postman try sending this instead :

URL POST : https://fcm.googleapis.com/fcm/send
{
    "data": {
        "title": "test",
        "body": "test",
        "click_action": "http://localhost:8001/"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://domain.in"
      }
    },
    "to": "dMNS-tergdrgd-PPMcqiCseoE3fLIQYAL9KbCxlnKcN2yQ1VV" 
}