Local Notifications in Mobile Application

Question

to give you an overview of what i'm doing, i have a ionic mobile application that uses firebase as its database . One of its features that im implementing is local notifications. Here are my codes

HTML CODE

   <button ion-button full (click)="scheduleNotification()">schedule</button>
   <button ion-button full (click)="scheduleNotification2()">schedule</button>

so this is the html code where in there a button allowing you to click or schedule a notification

TYPESCRIPT CODE

      import { Component } from '@angular/core';
      import { NavController, Platform} from 'ionic-angular';
      import { LocalNotifications } from '@ionic-native/local-notifications';
    @Component({
    selector: 'page-home',
     templateUrl: 'home.html'
   })
    export class HomePage {

    constructor(public navCtrl: NavController, private 
    localNotif:LocalNotifications, private platform:Platform) {

     }

    scheduleNotification() {
     this.platform.ready().then(()=>{
      this.localNotif.schedule({
    
        title:'Attention',
        text:'Rk notification',
        at: new Date(new Date().getTime() + 1 * 5000),
       
      });
      });
    }
     
     scheduleNotification2() {
     this.platform.ready().then(()=>{
      this.localNotif.schedule({
    
        title:'Attention',
        text:'Rk notification',
        at: new Date(new Date().getTime() + 1 * 5000),
       
      });
      });
    }


  
}

so the problem here is that, when i click both buttons for the notification to pop out , it only overrides the other. so it only displays one notification. i wanted to display both without overiding. how do i do that?

Answer 1

You need to pass an id to your localNotification, it must be a number and by default it's 0, so if you don't declare an id it'll override the previous scheduled notification.

If the user is able to manipulate the notifications (like editing, deleting, updating) i recommend saving this id somewhere so the user can be able of doing so.

Since the id needs to be unique there's a lot of ways of generating ids, since i don't know how often your user is going to create notifications i'll use the most simple way of generating that's Math.random().

scheduleNotification() {
 this.platform.ready().then(()=>{
  this.localNotif.schedule({
    id: Math.round(Math.random() * 1000000)), // this'll generate an id of 7 random digits
    title:'Attention',
    text:'Rk notification',
    at: new Date(new Date().getTime() + 1 * 5000),
  });
  });
}

Another advice i can give is manipulating time for the manipulations in the smallest time unit possible, always try using milliseconds or seconds.

Hope this help.