
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).