How to handle push notifications in both client end and server end?

I have a chat app where notification is sent upon receiving a message while the app is not active.
I went through the documentation but it wasn’t very clear on the following:

Client end:

  1. How to clear the notifications counter badge upon opening the app whether through the notification or the app icon after being closed.
    The suggested answer is clearing the badge property of the notification received by the app but that only works when the app is open so it can receive the notification.

Server end:

  1. How to set a thumbnail to the notification shown in the notifications tray.
  2. How to override or clear notifications that were previously sent to the client (related to messages) to avoid stacking multiple notifications of multiple messages from the same sender ?

If you set the badge value to zero, it should clear. Let me know if that doesn’t work.

1 Like

Thanks for your reply @ccheever do you mean the badge value received with the notification object received by the app ?

yes, try that. Let us know if that doesn’t work.

What about the incrementing part

You probably want to keep track of the number of unread messages on your server, and set it to that number, so set it to 2, or 3, etc. instead of 1, as the messages come in.

Or am I misunderstanding your question?

1 Like

@ccheever can you please check my updated question ?

Not sure if this answers all of your questions, but we have a chat app, as well, and the following Expo API functions helped a lot:

  1. Expo.Notifications.dismissAllNotificationsAsync() (https://docs.expo.io/versions/latest/sdk/notifications.html#exponotificationsdismissallnotificationsasync) - we use this to clear out any new message notifications that have accumulated in the tray whenever the app goes inactive on Android. You could also be a bit more aggressive and clear these out whenever a user visits the chat feed.
  2. Expo.Notifications.setBadgeNumberAsync(number) (https://docs.expo.io/versions/latest/sdk/notifications.html#exponotificationssetbadgenumberasyncnumber) - when the app goes inactive, we call this with the latest unread number we keep within the app to update the badge count on iOS as the user reads messages.

For what it’s worth, as best I can tell these behaviors are pretty similar to what Slack does - if it works for Slack, it probably works for my chat app, right? :slight_smile:

Speaking of when the app goes inactive, you can detect this by listening to AppState (AppState · React Native).

The only thing the server-side API can do is send additional notifications and set the badge count on iOS when a notification is sent. It can’t clear anything, so you’ll either have to do that in your app with one of those API’s or leave it to the user to clear everything.

6 Likes

@llamaluvr Awesome answer … but how about the case where the app is close or killed how to set the badge counter upon receiving messages ?

And what about adding a thumbnail to the notification sent by the server ?

Your app can receive push notifications whether it is open or closed, and those push notifications can set the badge number. What happens in our system is that, when user A sends a message to user B, as part of the “send message” API call, it sends a push notification to user B. Just before sending that push notification, it checks the number of unread messages user A has (we keep an is_unread flag that is toggled off as a message is downloaded by the recipient from our server), and then puts that number in the “badge” field in the Expo HTTP push notification API request payload (https://docs.expo.io/versions/latest/guides/push-notifications.html#sending-notifications).

To circle back to what I was saying originally, after the user enters the app after receiving the push notification, views the message, and exits the app, we then clear the badge number using the client-side API as the app goes into inactive status.


Regarding thumbnails in push notifications, I’m not aware of those. Is that an Android-specific feature? I don’t see anything in the Expo API that would support them. You can set the icon next to the Android notification in app.json (https://docs.expo.io/versions/latest/guides/configuration.html#notification).

3 Likes

Expo.Notifications.setBadgeNumberAsync(number)
only works for ios. @llamaluvr what lib are you using for android?

I see nothing in the Expo API for Android notification thumbnails, so I’m guessing it’s not supported.

For setting badge numbers on Android…
Prior to Oreo, Android didn’t have icon badges.
In Oreo, you get a dot next to the icon. Native apps have more granular control over this dot, but the default behavior is that it shows a dot if there’s 1+ notifications for the app in the tray, and no dot if there are not any notifications in the tray. So, once you send a client a notification, they get a dot. Then they go into your app, view the message, and you can remove the dot by calling Expo.Notifications.dismissAllNotificationsAsync() (or one of the other dismiss API calls if you need more granular control). I’m having trouble re-googling my source for this behavior, but you can probably find more info by looking in Android’s developer documentation.

1 Like

@llamaluvr this is what I have on my Android 7.0 Nougat

Also if you don’t mind … can you provide me with a link to the documentation on how to integrate deep linking or whatever the way to redirect the user to a specific page on the app upon tapping on the notification as I can’t find any.

As far as I know, stock Android only supported icon badges starting in Oreo (see https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwii6IjT6N_YAhXJzIMKHfiICrAQFggpMAA&url=https%3A%2F%2Fwww.androidcentral.com%2Fandroid-o-notification-badges&usg=AOvVaw152fKZrlhnOIONPTex_1A3). And stock Android’s badges look significantly different.

What you’re seeing could be something Galaxy-S-specific or something specific to Facebook Messenger. Maybe Samsung sets a badge based on notifications in your tray or Messenger is detecting you have a Galaxy S and is calling a Samsung-specific API. If it’s based on notifications in your tray, then you have some chance of controlling it with the Expo API’s. I don’t believe Expo has access to Samsung-specific API’s and I don’t have a Galaxy phone.


I’ve never done it before (I’m just a fellow Expo user trying to help), but it seems like you could direct a user to a specific part of the app via the notification listener (see code in https://docs.expo.io/versions/latest/guides/linking.html#when-to). It fires when the app is open and the notification is received, or when the app is closed and the notification is tapped. And notifications can include a custom payload (e.g., a message ID). You’d have to do something else clever (perhaps with AppState) to differentiate between the two conditions.

2 Likes

Expo doesn’t have an API for setting the notification badge count on Android. This may be a Samsung-specific feature that Android in general does not offer.

Android Oreo does have a new method called NotificationBuilder.setNumber but this doesn’t set the badge count visible from the home screen – you have to long-press the app icon to bring up a notification menu to see that count. This article talks about that feature: Exploring Android O: Notification Badges | by Joe Birch | Exploring Android | Medium. This isn’t exposed by Expo but if you think it would address your needs you can open a feature request here: Canny.

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.