How to set Bagde on receiving notification

Ionic Native
1

Hi,
Stucked in setting badge for app icon on receiving push notification.Using FCM plugin for notification and ionic-native badge plugin for badge.
Trying to set badge count,as per the number of notification received, and to clear the badge when the notification is clicked or the app icon is clicked.

My code:

platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      var time = setInterval(function(){
        FCMPlugin.onNotification(function(data){
          this.badge.set(JSON.stringify(data.badge));
          if(data.wasTapped == true){
            alert( JSON.stringify(data) + this.bagde_number);
            this.badge.clear();
          }else{
            alert( JSON.stringify(data) + this.bagde_number);
            this.badge.clear();
          }  
        });
      }, 2000);
      
    });

Any Solution is appreciable.

Thanks,

2

So what is the problem? Using these two plugins sounds like a reasonable idea.

3

hi @Sujan12,
thanks for the reply.
The problem is that the app badge is not setting while receiving the notification.Now the badge number set only by static method,by specificing the badge number.I need to set the badge number dynamic with the incoming notification and needs to clear the badge from app icon on clicking the app icon or the notification on tapping from the notification tray.

Hope its clear.

Thanks,

4

Provide a link to the plugins you are using so we can have a look at the docs what is supported.

5

hi,
Links referring for badge,
https://ionicframework.com/docs/native/badge/ [specified in the code]
https://github.com/katzer/cordova-plugin-badge

Link of fcm plugin,

Thanks,:slightly_smiling_face:

6

I see no support for badge numbers here at all.

on the other hand can do what you want:

this.badge.set(10);
this.badge.increase(1);

You only have to call these methods with the values you want to set.
Clearing the badge should also work.

7

hi @Sujan12,
thanks for the reply,
But I want to set the badge number whenever a notification is received.

this.badge.set(10);
this.badge.increase(1);

If we use this I think the app icon always will have badge with badge number 10,when app is installed, and will increase by one eveytime,and not according to the received number of notifications.

My idea is to display the badge with a badge number equals to the number of received unread notifications. And to clear the badge after reading the notification.

What about using the second link of badge plugin,ie, using cordova.plugins.notification.badge. Any idea to implement the one.

Thanks :slightly_smiling_face:,

8

Isn’t this what you are doing in your code?

I just mentioned the methods again - I don’t say you should just execute that.

Yes, where is the problem? You code posted above does something like that.

cordova.plugins.notification.badge is the plugin that is used by Ionic Native badge in the background. Ionic Native just gives you nicer code.

9

[quote=“Sujan12, post:8, topic:105505”]
Yes, where is the problem? You code posted above does something like that.

akhilsanker94: [/quote]
But badge number is not setting to the value,JSON.stringify(data.badge),from the notification.That is the problem for me :expressionless:My notification data has a parameter badge but it cannot be used as a badge number to set the badge.

Thanks,

10

Ok.

Can you console.log the data.badge value when you receive the notification?
Can you set a badge number in normal code when clicking a button?

11

i also have this problem. From what i see all the push plugins(e.g fcm, cordova-plugin-firebase, push-plugin) is not call whenever the notification is received.

12

Did we manage to get a way around this. Im also using FCM together with the native-badge my problem is that fcm.onNotification only gets called when app is open and not when app is in background.

13

Hi guys, I think I found a solution.
You can set badge number using push notification that you used such as FCM.
The service need to be handled by push notification service not the badge plugin.
You can refer this link https://firebase.google.com/docs/cloud-messaging/http-server-ref .
After that, maybe you can create a service that can keep track the badge number.

2 Likes
14

I am using the FCM plugin and it works perfectly both iOS and Android (foreground and background). However, for the onNotification method to be called on Android you should do the following:

  1. Add the title and body inside the data property. keep it also in the notification property
  2. Add the click_action: ‘FCM_PLUGIN_ACTIVITY’ in the notification property

The code above didn’t work because the onNotification was not being called when the app right?.

Here is the sample:

{
to: ‘token’,
notification: {
title: ‘xxxx’,
body: ‘yyyy’,
click_action: ‘FCM_PLUGIN_ACTIVITY’
}
data: {
title: ‘xxxx’,
body: ‘yyyy’,
badge_number: 999
}
}

The title and body in the notification property is to allow the message to be shown in the notification area (drawer) of the device. Try also to remove them from here and leave it in the data property, probably it won’t show in the notification area but still the onNotification will be called automatically (I haven’t tested this )

15

Thank you. I found the solution. We have to add badge count when send notification. Like below
“data”: {
my_key: ‘my value’,
my_another_key: ‘my another value’,
“body”: “body”,
“message”: “message”,
“badge”: 10, // Here you can set badge count
}

Above data will set badge count in the app icon.

1 Like
16

Hi would like to know , I have tried adding the badge.set method in the app.component.ts ,but when building to the device it does not display the badge is there something i am missing

thanks

17

So in this case, we need to maintain the badge count on the server side(from where we sending the pushnotification payload)?
e.g
in payload i will send badge count 1
& in my app i want to increment existing badge count by 1
let say 2 user using same app
in 1st user he/she see 2 badge count & 2nd is see only 1 badge on app icon?

18

Good job, i’m gladly helping others