Push Notification not Showing in Notification

Hi,

I am trying to integrate Push notification to my Chat application in react-native by following react-native-extensions-push-notification tutorial.
For Push Notification on react-native, I am using react-native-push-notification.
I am able to see my custom notification which I am sending from Postman.
But, for Comet Chat notification I see that my notification body is received in “onNotification()” handler but it doesn’t show up as Notification in app.
Is this issue related to Message Types in firebase because as per this documentation, a data only notification is meant to be a silent notification?

Hello @Rohit_Augmento,

We send a notification message with additional data payload. In foreground you will get both these payload and you will have to display it as a notification. While the app is in background state the firebase SDK takes care of displaying the notification and on clicking the notification you will get the data payload.
I hope this clears your doubt.

1 Like

Hi @mayur.bhandari,

So, I looked into the issue in more detail and I also contacted the support of react-native-push-notification. The issue is with the payload json of the notification. I logged the payload I receive from CometChat in my application and it is something like this

{
        "foreground": true,
        "userInteraction": false,
        "id": "-54639588",
        "data": {
        "alert": "Test",
        "sound": "default",
        "title": "Rohit Kumar",
        "message": "{\"receiver\":\"918888863333\",\"data\":{\"metadata\":{\"@injected\":{\"extensions\":{\"profanity-filter\":{\"message_clean\":\"Test\",\"profanity\":\"no\"}}}},\"entities\":{\"receiver\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"918888863333\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}},\"sender\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"917795523234\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}}},\"text\":\"Test\"},\"sender\":\"917795523234\",\"conversationId\":\"917795523234_user_918888863333\",\"receiverType\":\"user\",\"id\":\"570\",\"sentAt\":1590212953,\"category\":\"message\",\"type\":\"text\",\"updatedAt\":1590212953}"
        }
    }

Because there is no notification object in the payload the CometChat notification doesn’t show up as notification. Please, check that the conversation I had with their team, as per them the title and message of the notification should come from notification object in payload.

Hi,

Any update on this? I even tried a lower version of react-native-push-notification library but now I am receiving notification with message json in body

The reason for this is you are using the reserve keyword “message” to send the Json body of the message. The correct format of the payload should have been

{
    "foreground": true,
    "userInteraction": false,
    "id": "-54639588",
    "data": {
    "message": "Test",
    "sound": "default",
    "title": "Rohit Kumar",
    "SOME_OTHER_KEYWORD": "{\"receiver\":\"918888863333\",\"data\":{\"metadata\":{\"@injected\":{\"extensions\":{\"profanity-filter\":{\"message_clean\":\"Test\",\"profanity\":\"no\"}}}},\"entities\":{\"receiver\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"918888863333\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}},\"sender\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"917795523234\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}}},\"text\":\"Test\"},\"sender\":\"917795523234\",\"conversationId\":\"917795523234_user_918888863333\",\"receiverType\":\"user\",\"id\":\"570\",\"sentAt\":1590212953,\"category\":\"message\",\"type\":\"text\",\"updatedAt\":1590212953}"
    }
}

As you see “alert” should become “message” and the actual chat message json should be sent with SOME_OTHER_KEYWORD.

Hello @Rohit_Augmento,

We have a tutorial on adding push notification using react-native-firebase. We were getting the notification in background, killed and foreground state properly. You can follow the tutorial on the link given below.

Also, just guessing that does the library you are using internally treats message parameter as body if the body parameter is not present in the data key? To test this, you can use the fcm api to send notification and send the payload with the following combinations.

  1. Please send the exact payload as we send.
  2. Please add body parameter in the data key.

Please share your result with us, so that we can help you further. I hope this helps.

Hi @mayur.bhandari,

The Guide you shared is using the old version of react-native-firebase which is deprecated as per their documentation.
And I tried their latest version but it has lot of breaking changes.
Can you update your documentation with the version 6 of the library?

Hello @Rohit_Augmento,

The guide is basically just for reference. I will have a word with the team, but we cannot provide any timeline on when we can have an upgraded guide or if we can have an upgraded guide for that matter. However, you can migrate to v6 from v5 using the migration guide present here.

Also, I just wanted to ask if you did try the workaround I mentioned in my last answer? Can you please share the result of the workaround I have shared.

Hi @mayur.bhandari,

I understand that if you can’t create a guide for now but my only point is if some one from your team could quickly try the comet chat with the latest version of any push notification library then you can see the issue I am facing.
I am using the latest version of the react-native-firebase now

"@react-native-firebase/app": "^7.1.0",
"@react-native-firebase/messaging": "^7.1.0",
"@cometchat-pro/react-native-chat": "^2.0.8"

As you suggested I sent the following payload from https://fcm.googleapis.com/fcm/send API

{
"to" : "MY_FCM_TOKEN",
"data": {
    "alert": "Test",
    "sound": "default",
    "title": "Rohit Kumar",
    "body":"Some Test Body",
    "message": "{\"receiver\":\"918888863333\",\"data\":{\"metadata\":{\"@injected\":{\"extensions\":{\"profanity-filter\":{\"message_clean\":\"Test\",\"profanity\":\"no\"}}}},\"entities\":{\"receiver\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"918888863333\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}},\"sender\":{\"entityType\":\"user\",\"entity\":{\"lastActiveAt\":1590212799,\"uid\":\"917795523234\",\"role\":\"customer\",\"name\":\"Rohit Kumar\",\"status\":\"available\"}}},\"text\":\"Test\"},\"sender\":\"917795523234\",\"conversationId\":\"917795523234_user_918888863333\",\"receiverType\":\"user\",\"id\":\"570\",\"sentAt\":1590212953,\"category\":\"message\",\"type\":\"text\",\"updatedAt\":1590212953}"
    }
}

But, I am receiving the payload in onMessage but it is not being shown as notification because it doesn’t have a notification object json in it.
We also have some notification in our server and the sample payload sent from our server using the same fcm API is something like this

 {
"to" : "MY_FCM_TOKEN",
"notification": {
	"body": "Some Test Message",
	"title": "Some Test title",
	"sound": "default"
},
"data" : {
	"route" : "Home"
}
}

This payload works perfectly and we receive the notification.
The main issue is with latest updates of all the push-notification libraries they have stopped showing data only notification as a notification because they are supoose to be silent notification as per Android and iOS guidelines. I think you should also make this change in your server by changing the payload structure. Anyway if anyone from your team wants to quickly try it, here is the code

//RemotePushTest.js
import { useEffect } from "react"
//import { getFCMToken, saveFCMToken } from "../../services/Helper"
import messaging from '@react-native-firebase/messaging';
import AsyncStorage from "@react-native-community/async-storage";


const storeFCMToken = async (token) => {
    try {
        let fcmToken = await AsyncStorage.getItem('fcmToken') || '' //await getFCMToken()
        console.log('Saved fcm token', fcmToken)
        if (fcmToken.localeCompare(token) != 0) {
            console.log('FCM Token Has changed')
            await AsyncStorage.setItem('fcmToken', token)
            //await saveFCMToken(token)
        }

    } catch (error) {

    }
}

const RemotePushTest = ({ navigation }) => {

    useEffect(() => {

        messaging().onNotificationOpenedApp(remoteMessage => {
            console.log(
                'Notification caused app to open from background state:',
                remoteMessage.notification,
            );
            //navigation.navigate(remoteMessage.data.type);
        });
        // Check whether an initial notification is available
        messaging()
            .getInitialNotification()
            .then(remoteMessage => {
                if (remoteMessage) {
                    console.log(
                        'Notification caused app to open from quit state:',
                        remoteMessage.notification,
                    );
                    //setInitialRoute(remoteMessage.data.type); // e.g. "Settings"
                }
            });


        // Get the device token
        messaging()
            .getToken()
            .then(token => {
                console.log('FCM Token', token)
                return storeFCMToken(token);
            });

        // Listen to whether the token changes
        return messaging().onTokenRefresh(token => {
            storeFCMToken(token);
        });


    }, []);
    useEffect(() => {
        const unsubscribe = messaging().onMessage(async remoteMessage => {
            console.log('A new FCM message arrived!', JSON.stringify(remoteMessage));
        });

        return unsubscribe;
    }, []);
    return null
}

export default RemotePushTest

and in your App.js just include

<RemotePushTest />

Lastly, I didn’t see any workaround in your last answer. Can you repeat it again if that’s okay?

Please add the notification key in the payload when you send a notification via the fcm API. The notification key is present in the payload we send.

The workaround I was talking about was for react-native-push-notification. When using the react-native-push-notification library, you shared a screenshot where the notification was showing the actual JSON object present in the message key. So I just wanted you to check if you add one additional parameter body in the data payload. While the rest of the payload being the same as you receive via CometChat. Does the notification display the value present in the body key or does it display the whole JSON object present in the message key?

We do not send a data message. Instead, we send a message with both notification and data payload

Hi @mayur.bhandari,

Can you send a sample JSON payload you send? Because I rechecked again in the logs, the payload we receive doesn’t have notification key. And I have tried 2 libraries now and it was the same payload with both of them.

The workaround I was talking about was for react-native-push-notification . When using the react-native-push-notification library, you shared a screenshot where the notification was showing the actual JSON object present in the message key. So I just wanted you to check if you add one additional parameter body in the data payload. While the rest of the payload being the same as you receive via CometChat. Does the notification display the value present in the body key or does it display the whole JSON object present in the message key?

It displays the json present in the message key. It doesn’t consider body key. I tried the following payload from fcm API

{
"to" : "MY_FCM_TOKEN",
"data" : {
	"body": "Some Body",
	"title": "Some Title",
	"message":"Some Message"
}
}

And I saw “Some Message” in notification