Badge counter in Ionic2 Type Script Android application


#1

I’m trying to use badge counter for Push Notification in Ionic2 Type Script Android application.

I’ve installed:

$ ionic cordova plugin add cordova-plugin-badge
$ npm install --save @ionic-native/badge

It is added to app.module.ts import { Badge } from '@ionic-native/badge' as Badge in providers, and here is my test.ts code, just to test, increase counter manually:

   import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import { Badge } from '@ionic-native/badge'; 
    
    @Component({
      selector: 'page-test',
      templateUrl: 'test.html'
    })
    export class TestPage {
    
      badgeNumber: number;
      out: any;
    
      constructor(public navCtrl: NavController, private badge: Badge) { }
    
      async increaseBadges(badgeNumber: string) {
        try {
          let badge = await this.badge.increase(Number(badgeNumber));
          console.log(badge);
          this.out = badge;
        } catch (e) {
          console.log(e);
        }
      }
    
      async decreaseBadges(badgeNumber: string) {
        try {
          let badge = await this.badge.decrease(Number(badgeNumber));
          console.log(badge);
          this.out = badge;
        } catch (e) {
          console.log(e);
        }
      }
    
      async clearBadges() {
        try {
          let badge = await this.badge.clear();
          console.log(badge);
          this.out = badge;
        } catch (e) {
          console.log(e);
        }
      }
    
      async getBadges(badgeNumber: number) {
        try {
          let badgeAmount = await this.badge.get();
          console.log(badgeAmount);
          this.out = badgeAmount;
        } catch (e) {
          console.log(e);
        }
      }
    
      async setBadges(badgeNumber: number) {
        try {
          let badges = await this.badge.set(badgeNumber);
          console.log(badges);
          this.out = badges;
        } catch (e) {
          console.log(e);
        }
      }
    
      async requestPermission() {
        try {
          let hasPermission = await this.badge.hasPermission();
          console.log(hasPermission);
          if (!hasPermission) {
            let permission = await this.badge.requestPermission();
            console.log(permission);
          }
        } catch (e) {
          console.error(e);
        }
      }
    
    }

and test.html:

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

the same program, except only registerPermission(); instead requestPermission(); showed circles with number several months ago, but it was another device. Now it is Moto C Plus with Android version 7.0.

By default my phone does not shows badges for any app, WhatsApp for example, with Notifyer widget it works for WhatsApp, but does not works in my app.

Any advice, guide or example would be helpful