How to Display Ionic 4 Local Notifications (Schedule, Payload & Callback)

ionic-4-local-notification

When you need a quick and easy way to notify your users about things happening in your app at a later point you can use local notifications which look like a push notification (more on the difference later) and can be implemented with just a few lines.

In this Quick Win we will implement the local notification plugin and schedule a notification for a later point, send additional data and subscribe to events in order to receive our payload data.

ionic-4-local-notification

Adding Local Notifications

The installation is pretty easy for this one, we start with a blank app and add the Ionic native package and also the according Cordova Plugin for local notifications.

Keep in mind that you will have to test this functionality inside your simulator or real device. Cordova plugins won’t work inside the browser preview!

Now go ahead and get started with:

Next thing we need is to add the plugin to our app/app.module.ts so put it like this:

That’s all for the setup, now let’s see some local notifications in action!

Scheduling Local Notifications

In order to show notifications we ned to schedule the upfront. We can schedule them for a specific time or even have them recurring at specific times, for example if you want to notify your users every morning to drink some water!

But for a moment let’s also talk about the difference to real push notifications. Your app might need push notifications if..

  • Your server sends some update to the app
  • You want to notify your users at an unknown point later in time
  • You want to remotely awake your app from the outside

Local notifications do look like what you are used to from your phone, but most of the notifications you get from WhatsApp and all the other apps are push notifications. These notifications are more deeply connected to the OS and are implemented completely different!

But we also got a course on create Push Notifications with OneSignal for members of the Ionic Academy inside.

For now we need a view with some simple buttons to trigger a few different notifications, so go ahead and change your app/home/home.page.html to:

We also added a list already in order to show all the scheduled notifications later. That’s nice especially for debugging to see if your notifications are actually schedule, and if you would like to go deeper on that you can also cancel notifications by their ID if you don’t want them to come up again.

Now we dive into the creation of local notifications.

First of all, inside our constructor we subscribe ti local notification events which in our case a click and trigger. The first occurs when a user actually clicks on the message that pops up, the second one occurs once the trigger time for the notification is reached.

Of course this is optional but I wanted to show you how to react to the data and especially the payload of the events, so if you send some specific data with your local notification you can extract it here!

Also, if you don’t set foreground to true for a notification it won’t show up when the app is already opened – in that case some kind of alert like we do make sense. Or just have it always appear with the setting however you need it.

Now we see 3 different cases in action:

  • scheduleNotification(): This is the basic example of how to schedule a notification at 5 seconds in the future. Actually there are 2 ways to achieve this either with a Date object or passing in seconds (which not works as a string with Typescript so we add ELocalNotificationTriggerUnit). This notification appears once!
  • recurringNotification(): This is an example of how to make a notification come up every minute. Perhaps not super helpful, but maybe with a bit bigger timeframe!
  • repeatingDaily(): This notification will come up every morning at 9.30

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 or trigger 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!

Now go ahead and add the following code to your app/home/home.page.ts:

You can run this app in your simulator or device and give the different functions a try. Remember, if you are testing this at a different time you might need to change the hours and minutes for the daily repeating notification to see it in action and don’t wait until it happens the next time.

You might have noticed that we display the data inside our alert view that was passed in the beginning as data object.
This means can easily put specific information into the notification which you can then use inside the subscribe block to bring the user to a specific page or call a specific function depending on what you passed!

Conclusion

There is a lot more to discover like custom icons or different forms of notification even with additional action buttons. The problem is, with the current version (which was 0.9 beta at the time writing this) most of the other stuff was either not consistent across different platforms or simply didn’t work at all.

If you make action buttons happen on iOS or get other functions working of the official cordova plugin leave a comment below and I’m happy to extend this!

You can also find a video version of this Quick Win below.

Comments on How to Display Ionic 4 Local Notifications (Schedule, Payload & Callback)

  1. Kamal Salah says:

    Hi Simon greate work, thanks.

    I wouder if you got the sound to work, i would like to play a sound file when a notification triggers. I tryied this code as the manual tells us. but did not get it to work. Any ide?

    cordova.plugins.notification.local.schedule({
    title: “New Message”,
    message: “Hi, are you ready? We are waiting.”,
    sound: “file://sounds/message.mp3”,
    icon: “http://my.domain.de/avatar/user#id=123”
    });

Leave a Reply

Your email address will not be published. Required fields are marked *