CODEWITHSUNDEEP
androidpush-notificationangular2-nativescript
Leukipp
Leukipp

Reputation: 590

Nativescript: Display badge count on Android

Task: Show the badge count passed with a push notification on the launch icon of an Android app.

Setup: Nativescript + Angular2, Firebase

(The thing you don't have to do anything on iOS.)

Upvotes: 0

Views: 1563

Answers (2)

Praveen Kumar
Praveen Kumar

Reputation: 91

There is no permanent solution to this as of now, as a workaround you can use two notification resource icons and based on a boolean variable change the image on template.

<TabStripItem>
            <Image [src]="notificationIconWithoutAlert ? 'res://bell_solid' : 'res://bell_solid_alert'" class="fas"></Image>
</TabStripItem>

Upvotes: 0

Leukipp
Leukipp

Reputation: 590

Note: Badge counts can only be shown for certain brands. See [1]. You will most likely need such a phone for testing (it worked on my Samsung phone).

I have installed and setup the plugin nativescript-plugin-firebase (e.g., the app can receive push notifications and the badge count is shown on iOS).

Add the Android library ShortcutBadger [2] to the dependencies in App_Resources/Android/app.gradle:

dependencies {
    compile 'me.leolin:ShortcutBadger:1.1.16@aar'
}

Create a broadcast receiver:

android.support.v4.content.WakefulBroadcastReceiver.extend("<your_package>.BadgeBroadcastReceiver", {

    onReceive: function (context: any, intent: any) {
        if (!isAndroid || intent.getExtras() == null || !intent.hasExtra("gcm.notification.badge")) {
            return;
        }

        let badge = parseInt(intent.getStringExtra("gcm.notification.badge"));
        me.leolin.shortcutbadger.ShortcutBadger.applyCount(context, badge);
    }
});

Add the following lines to the file AndroidManifest.xml in the tag <application>:

<receiver android:name="<your_package>.BadgeBroadcastReceiver"
          android:enabled="true"
          android:exported="true">
  <intent-filter>
    <action android:name="com.google.android.c2dm.intent.RECEIVE"/>
  </intent-filter>
</receiver>

To reset the badge count I added a callback to the resume event in component wrapping the application (e.g., app.component.ts):

constructor(private authService: AuthService, private notificationService: NotificationService) {
    application.on(application.resumeEvent, () => this.resetUnreadMessageCount());
}

/**
 * Reset the counter of unread messages (in iOS terms: badge count).
 */
resetUnreadMessageCount() {
    if (isAndroid) {
        me.leolin.shortcutbadger.ShortcutBadger.applyCount(application.android.context, 0);
    }
}

[1] How to add a notification badge/count to application icon on Sony Xperia devices?

[2] https://github.com/leolin310148/ShortcutBadger/

Upvotes: 1

Related Questions