Ionic Local Notifications (Schedule, Payload and Callback) [v3]

Many times you want to notify your users about events, but perhaps it is not worth implementing real push notifications. For those cases we can easily make use of local notifications, which look completely like a push notification but the way to implement them is a lot shorter.

In this quick win we will add the local notifications plugin from Ionic Native to our app and learn to schedule a notification, send data along with it and finally listen for a callback to know when our notification was shown to the user or other events happened.

Adding Local Notifcations to Your App

When I used the plugin I had problems with iOS 10 as there was an update to how notifications on iOS work in general. Therefore, I installed a specific branch of the Cordova plugin which will soon be hopefully merged into the master. If you want to get it working on iOS as well make sure to install it like this:

npm install --save @ionic-native/local-notifications
ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications\#ios10

# If you encounter problems, install latest core package
npm install --save @ionic-native/core@latest

npm install --save @ionic-native/local-notifications

ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications\#ios10

# If you encounter problems, install latest core package

npm install --save @ionic-native/core@latest

Also, I sometimes had problems with the current core package of Ionic Native, so if you hit an error perhaps installing the latest version fixes your problems.

Finally make sure to load the plugin inside your src/app/app.module.ts and add it to the array of providers like this:

import { LocalNotifications } from '@ionic-native/local-notifications';
...
...
providers: [
    LocalNotifications ,
    ..
]

import { LocalNotifications } from '@ionic-native/local-notifications';

...

providers: [

LocalNotifications ,

]

The basics are ready, noe we can actually use them!

Creating Local Notifications

Inside your page you first of all need to import the package, and you also need from Ionic the Platform and AlertController which will help us to catch events and present an alert.

So at the top make sure you have loaded these:

import { NavController, AlertController, Platform } from 'ionic-angular';
import { LocalNotifications } from '@ionic-native/local-notifications';

1 2	import { NavController, AlertController, Platform } from 'ionic-angular'; import { LocalNotifications } from '@ionic-native/local-notifications';

Now, when we want to use local notifications we need to schedule them.

To schedule them we need to pass in a few parameters like an ID by which we could find the notification later, a title, a text and of course a date when the notification should be presented, even when the app is in the background.

Besides that information we can also pass an object as data to the notification which we can then use inside our callback!

The callback is implemented inside the constructor, and means: Whenever someone clicks on the notification which comes up at the top of the device, this function will be called.

We also have to wrap it into the platform ready event because otherwise this callback might not be assigned correctly and get’s never triggered (I had this problem until I realized what was wrong).

In our example, we will show an alert view inside the app when the user has clicked on the notification. Now go ahead and add to the page where you want to implement local notifications something like this:

constructor(public navCtrl: NavController, private plt: Platform, private localNotifications: LocalNotifications, alertCtrl: AlertController) {
  this.plt.ready().then((readySource) => {
    this.localNotifications.on('click', (notification, state) => {
      let json = JSON.parse(notification.data);

      let alert = alertCtrl.create({
        title: notification.title,
        subTitle: json.mydata
      });
      alert.present();
    })
  });
}

constructor(public navCtrl: NavController, private plt: Platform, private localNotifications: LocalNotifications, alertCtrl: AlertController) {

this.plt.ready().then((readySource) => {

this.localNotifications.on('click', (notification, state) => {

let json = JSON.parse(notification.data);

let alert = alertCtrl.create({

title: notification.title,

subTitle: json.mydata

});

alert.present();

})

});

}

scheduleNotification() {
  this.localNotifications.schedule({
    id: 1,
    title: 'Attention',
    text: 'Simons Notification',
    data: { mydata: 'My hidden message this is' },
    at: new Date(new Date().getTime() + 5 * 1000)
  });
}

scheduleNotification() {

this.localNotifications.schedule({

id: 1,

title: 'Attention',

text: 'Simons Notification',

data: { mydata: 'My hidden message this is' },

at: new Date(new Date().getTime() + 5 * 1000)

});

}

Inside you view simply add an additional button to call the scheduleNotification() function and give it a try!

This will not work inside the browser, so you need a simulator or physical device to test it.

The result might look like below.

You might have noticed that we display data inside our alter view that was passed in the beginning as data object This object comes into our callback and we simply parse the data back to JSON and use the initial property mydata again there!

By doing this you can easily put specific information into the notification which you can then use inside the callback to bring the user to a specific page or call a specific function depending on what you passed!

More..

There is a lot more you could do, like update or cancel a notification by it’s given id or pass more information like a sound and image to the notification. To check out all options, simply follow the instructions on the official Github repository!

You can find a video version of this article below.