Ionic 3 - Notification Badges

Notification badges can be extremely useful when creating mobile applications that deal with dynamic data. This feature is often overlooked but can add a lot of power to an application that currently doesn’t use badges. Let’s see how we can add badges to an Ionic 3 application.

New Project

As always, we'll be starting out with a new project:

# Create a new Ionic project
$ ionic start notificationBadges blank

# Navigate to directory
$ cd notificationBadges

Dependencies

Now we need to add the Cordova and Ionic Native plugin.

# Cordova plugin installed with the Ionic CLI
$ ionic cordova plugin add cordova-plugin-badge

# Ionic Native types 
$ npm install --save @ionic-native/badge

Initiation

As with all Ionic Native plugins, we’ve got to add Badge to our providers.

import { Badge } from '@ionic-native/badge';

@NgModule({
  ...
  providers: [
    Badge
  ]
})
export class AppModule {}

Template

In our example project, I've created a template with some buttons to test our functionality. Here's my home.html:

<ion-content padding>
 
  <ion-item>
    <ion-label floating>Badge Number</ion-label>
    <ion-input type="number" [(ngModel)]="badgeNumber">
    </ion-input>
  </ion-item>
 
  <button ion-button (click)="setBadges(badgeNumber)">Set Badges to {{badgeNumber}}</button>
  <button ion-button (click)="increaseBadges(badgeNumber)">Increase Badges by {{badgeNumber}}</button>
  <button ion-button (click)="decreaseBadges(badgeNumber)">Decrease Badges by {{badgeNumber}}</button>
  <button ion-button (click)="getBadges()">Get Badges</button>
  <button ion-button (click)="clearBadges()">Clear Badges</button>
  <button ion-button (click)="requestPermission()">Request Permission</button>
 
</ion-content>

Permission

Prior to doing anything with the plugin, we need to ensure that we’ve got permission to set badges. I’ve essentially requested to see if we currently have permission, and if not, we register permission to set badges.

async requestPermission() {
  try {
    let hasPermission = await this.badge.hasPermission();
    console.log(hasPermission);
    if (!hasPermission) {
      let permission = await this.badge.registerPermission();
      console.log(permission);
    }
  } catch (e) {
    console.error(e);
  }
}

Awesome. Now we've got permission to add badges to our application, we can go ahead.

Set Badges

The first thing you may want to do is set badges to a particular amount. You’ll probably want to add this to a resolved push notification or a message event.

async setBadges(badgeNumber: number) {
  try {
    let badges = await this.badge.set(badgeNumber);
    console.log(badges);
  } catch (e) {
    console.error(e);
  }
}

Get Badges

To return how many badges are currently set, we can use the getBadges() function.

async getBadges() {
  try {
    let badgeAmount = await this.badge.get();
    console.log(badgeAmount);
  }
  catch (e) {
    console.error(e);
  }
}

Increase Badges by X

Let’s say you want to increase the amount of badges by 1, you could manually do a get() and then set() … or you could use increase() !

async increaseBadges(badgeNumber: string) {
  try {
    let badge = await this.badge.increase(Number(badgeNumber));
    console.log(badge);
  } catch (e) {
    console.error(e);
  }
}

Notice that we’re casting the badgeNumber to a Number, as when we get the input inside of our ion-input in this scenario, it’s a string. Ensure you’re passing this as a number when in production, but this shouldn’t be an issue as I doubt you’ll be using a text input.

Decrease Badges by X

We can do a similar thing for decreasing badges.

async decreaseBadges(badgeNumber: string) {
  try {
    let badge = await this.badge.decrease(Number(badgeNumber));
    console.log(badge);
  } catch (e) {
    console.error(e);
  }
}

Clear Badges

Let’s say the user has seen the notifications that you’re within the badge. An easy way to clear the badges can be done as follows:

async clearBadges(){
  try {
    let badge = await this.badge.clear();
    console.log(badge);
  }
  catch(e){
    console.error(e);
  }
}

Conclusion

Using badges within your Ionic applications is an awesome way to show the user contextual information whenever there’s content they’ve not seen. Use the plugin and the Ionic Native wrapper to add power to your application(s).