Twilio - Can I modify the notification data before showing?

[axeljeremy7]

I am using twilio and the payload i received is:
"data": { "channel_title":"0cc332deda83ce6df5a80b4aa18d0e11|2363ce7c6cb4608182", "twi_body":"0cc332deda83ce6df5a80b4aa18d0e11|2363-ce7c6cb4608182;Augustine Sanders: 90", "twi_message_id":"RUbb4b9652c1bb03c5af6deee28de02acd", "channel_sid":"CH05e2a2e60ed0449f94de551fc57a297b", "twi_message_type":"twilio.channel.new_message", "message_sid":"IM1fbbef38a12941e581625babbfac631c", "message_index":"657", "author":"Augustine Sanders", "message_id":"IM1fbbef38a12941e581625babbfac631c", "channel_id":"CH05e2a2e60ed0449f94de551fc57a297b"}

The notification is parse with title as the name of the app and the body as twi_body, since this has this value0cc332deda83ce6df5a80b4aa18d0e11|2363-ce7c6cb4608182;Augustine Sanders: 90 , I haven't found a way to modify the payload when i received, I would like just this Augustine Sanders: 90, but it looks like this package automatically use twi_body ad the value body. I want to know if I can modify before showing.

This is so far with tag or version 3.5.2. In this version, remote notifications works in foreground and background.

Log of what i think is getting info

 LOG  onNotification()
 LOG  [typeof] => object
 LOG  [KEYS]
 LOG  ["foreground", "finish", "userInteraction", "id", "data", "message"]
 LOG  [ENTRIES]
 LOG  "foreground": false
 LOG  "finish": undefined
 LOG  "userInteraction": false
 LOG  "id": 442067936
 LOG  "data": {"channel_id":"CH05e2a2e60ed0449f94de551fc57a297b","message_id":"IMc53e9268190a486c9247fce6ae0cefbd","author":"Augustine Sanders","message_index":"668","message_sid":"IMc53e9268190a486c9247fce6ae0cefbd","twi_message_type":"twilio.channel.new_message","channel_sid":"CH05e2a2e60ed0449f94de551fc57a297b","twi_message_id":"RU85bec0cefa21ccf602bf128cf6a5b294","twi_body":"0cc332deda83ce6df5a80b4aa18d0e11|2363-ce7c6cb4608182;Augustine Sanders: 101","channel_title":"0cc332deda83ce6df5a80b4aa18d0e11|2363-ce7c6cb4608182"}
 LOG  "message": 0cc332deda83ce6df5a80b4aa18d0e11|2363-ce7c6cb4608182;Augustine Sanders: 101```

[Dallas62]

Hi,

I will look into it, I not a big fan of this implementation with twi_body, let the developers choose what to to look better to me.

What do you observe on iOS?

[axeljeremy7]

in ios, works only in foreground, i am still having issue with background notifications.

[Dallas62]

You can test changes on dev branch.

Please refer to the CHANGELOG for update instructions:
https://github.com/zo0r/react-native-push-notification/blob/dev/CHANGELOG.md#unreleased

To install this version:

npm install zo0r/react-native-push-notification#dev

OR

yarn add zo0r/react-native-push-notification#dev

Make sure your build cache is cleaned.

[axeljeremy7]

I tested and it doesn't show, and in both cases foregruound and background. I call to show the notification manually and it does not show.

  
    report(remoteMessage, 'Remote Message handled in the background!!');
    logInfoInstabug({data: remoteMessage, name: 'setBackgroundMessageHandler()'});
    showTwilioRemoteNotification(remoteMessage.data);
});```

[junocs]

I'm able to get Twilio message displayed on notification center, when app is background, by following this idea. Here is the patch:

diff --git a/node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNReceivedMessageHandler.java b/node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNReceivedMessageHandler.java
index 1c92471..701a09c 100644
--- a/node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNReceivedMessageHandler.java
+++ b/node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNReceivedMessageHandler.java
@@ -110,6 +110,14 @@ public class RNReceivedMessageHandler {
         Bundle dataBundle = new Bundle();
         Map<String, String> notificationData = message.getData();
 
+        if (!bundle.containsKey("message")) {
+            String twiMessage = notificationData.get("twi_body");
+            if (twiMessage != null && !twiMessage.isEmpty()) {
+                bundle.putString("message", twiMessage);
+                bundle.putString("channelId", "notify_channel");
+            }
+        }
+        
         for(Map.Entry<String, String> entry : notificationData.entrySet()) {
             dataBundle.putString(entry.getKey(), entry.getValue());
         }

Note that you have to create a channel first in order to get it working properly. In my case, it is notify_channel.

if (Platform.OS === 'android') {
        PushNotification.createChannel({
          channelId: 'notify_channel',
          channelName: 'Default push notifications channel',
        })
      }

Also putting this in the AndroidManifest.xml

<meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

this in values/strings.xml

<string name="default_notification_channel_id" translatable="false">notify_channel</string>

[Dallas62]

Hi,

Since twilio send data-only, why don't you trigger a local notification with the corresponding field?
This is more simple than implement specific code for each notification provider.

[axeljeremy7]

@Dallas62 for android I am using firebase messaging to get the payload and then show to the user as local notification and so far is great.

[axeljeremy7]

@Dallas62 for ios, i am able to show the notifications but the this time is automatically, so it show both always in foreground and background. I am doing a chat app, and when open a channel the notification still show that's the only issue.
Did you know if is possible to modify when to trigger the foreground notification in ios?
Is the badge automatically increments based on the payload of firebase?

[axeljeremy7]

Hi,

Since twilio send data-only, why don't you trigger a local notification with the corresponding field?
This is more simple than implement specific code for each notification provider.

I am doing this, it works but i think I should edit on java to handle the payload, what is the expected payload for android notifications in this library?

[Dallas62]

Hi @axeljeremy7

This will be not handled by this library. I don't want to handle each notifications provider.

[axeljeremy7]

@Dallas62 ok 👌, also handleRemotePushNotification or handleRemotePushNotification in java, can you please tell where I should modify the payload so the notification will show?
I am using Twilio and I have no access to server that send the notifications, they have their own payload and I. cannot modify.
https://www.twilio.com/docs/notify/send-notifications?code-sample=code-receiving-a-notification-in-android&code-language=java&code-sdk-version=default
I want to modify the payload bundle in the java code, I understand that you don't want handle each provider.

These are the logs.

 handleReceivedMessage()
 remoteNotification is null: 
notificationData getKey: channel_id
 notificationData getValue: CH39b0f9283efd4fac8407683050f6503c
 notificationData getKey: message_id
notificationData getValue: IM5a6b1702a011475781f244dc2aafd0d8
notificationData getKey: author
 notificationData getValue: Augustine Sanders
 notificationData getKey: message_index
 notificationData getValue: 202
 notificationData getKey: message_sid
 notificationData getValue: IM5a6b1702a011475781f244dc2aafd0d8
notificationData getKey: twi_sound
notificationData getValue: default
notificationData getKey: twi_message_type
 notificationData getValue: twilio.channel.new_message
 notificationData getKey: channel_sid
 notificationData getValue: CH39b0f9283efd4fac8407683050f6503c
notificationData getKey: twi_message_id
notificationData getValue: RU2737a3d2fd415e402422ae9c15ddca08
notificationData getKey: twi_body
 notificationData getValue: Augustine Sanders: mlml
 notificationData getKey: channel_title
 notificationData getValue: TNT #1

In the code, the remote is null when it come from gcm , but the set up in Twilio is based on fcm, so I don't know if the condition in remote notification is ok?

[Dallas62]

There is no need to change the Java side.
Just handle the data-only notification in JS and transform/pass the values to localNotification.

[axeljeremy7]

@Dallas62
I have the impression based on two versions ago, that when a remote notification is received, the library automatically
show the notification. In this new version, is the notification automatically appear? or I have to manually create a local notification when onNotification is activated?

  // (required) Called when a remote or local notification is opened or received
  onNotification: handler.onNotification.bind(handler),

[Dallas62]

Data-only notification are not displayed by the library.
There was a fallback for that and Twilio notification some times ago, but I removed it since that leads to issues in some cases.