Count Push Notification from Firebase with Badge of app in background

Ionic Framework ionic-v3
1

Hello,

I’m trying to figure out, how to show and increase Push Notification from my Google Firebase with Badge Counter with app icon of Ionic2 application in the background with Android device.

For example, function below lets to increment or decrements Notification Badge Counter with button click in home.html form home.ts just as example:

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

Code in app.component.ts popups Push Notification from Google Firebase only with the opened app in foreground mode.

Advice would be helpful:

 initPushNotification() {
    this.push.hasPermission()
      .then((res: any) => {
        if (res.isEnabled) {
          console.log('We have permission to send push notifications');
        } else {
          console.log('We don\'t have permission to send push notifications');
        }
      });

    const options: PushOptions = {
      android: {
        senderID: 'My sender ID'
      },
      ios: {
        alert: 'true',
        badge: true,
        sound: 'false'
      },
      windows: {}
    };
    const pushObject: PushObject = this.push.init(options);
    pushObject.on('notification').subscribe((notification: any) => {
      console.log('Received a notification', notification);
      let confirmAlert = this.alertCtrl.create({
        title: 'New Notification',
        message: JSON.stringify(notification),
        buttons: [{
          text: 'Ignore',
          role: 'cancel'
        }, {
          text: 'View',
          handler: () => { }
        }]
      });
      confirmAlert.present();
    });
    pushObject.on('registration').
      subscribe((registration: any) =>
        console.log('Device registered', registration));
    pushObject.on('error').
      subscribe(error =>
        console.error('Error with Push plugin', error));
  }
2

As every plugin needs to be used by caution, i haven’t tried it out, but you need to use plugins which are coding that 10 lines of code.


if i understood correctly. It’s not really doing anything with javascript, as it’s not loaded in the background.

You can open your platform folder in android and develop yourself, i’m not sure about ios.:slight_smile: You need to add a backrground process to your app anyway, which is listening, there might be plugins for that. (shared service)

3

Hello, raxim

Thanks for answer

I’m new with Ionic and Type Script, need to figure out.

I’ve add Push Notification, works well.

then Badge:

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

and Camera plugin:

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

Also background-mode:

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

Not sure if it is correct, I use it in app.module.ts this way:

...
import { BackgroundMode } from '@ionic-native/background-mode'
...
...
providers: [
    BackgroundMode, 
    Badge,
    Camera,
    StatusBar,
    SplashScreen,
    Push,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
...

same import in app.components.ts push notification function with background mode:

...
 constructor(platform: Platform, 
              statusBar: StatusBar, 
              splashScreen: SplashScreen, 
              private push: Push, 
              public alertCtrl: AlertController,
              private backgroundMode: BackgroundMode,
              private badge: Badge) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      this.backgroundMode.enable();

      this.initPushNotification();   

    });
  }
...

then follows Push Notification code, shown in question. I can’t get, how to use Badge here. I’ve tried add it into function, but it increments only after foreground using and seems completely incorrect, because it counts the opening of the app, instead of push notifications:

 this.push.hasPermission()
      .then((res: any) => {
        if (res.isEnabled) {

          this.increaseBadges(this.badgeNumber);

          console.log('We have permission to send push notifications');
        } else {
          console.log('We don\'t have permission to send push notifications');
        }
      });

with function:

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

Also I found YouTube example Java Script with given Badge Plugin, but Ionic2 structure looks different now, I don’t have same directories and files in my project to follow this example exactly same way. In addition, Type Script code “badge increase example” in my question assumes implementation only with TS, if I get it right, not sure, need advice.