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.

Read Next..

How to Combine Ionic 4 Tabs and Side Menu Navigation Creating a tab bar with Ionic 4 is pretty easy, adding a side menu is a bit more tricky in terms of the structure but still quite easy. But when it co...
How to Use Font Awesome With Ionic 4 The built in Ionicons with Ionic are great, but if you need something specific, have your own custom icons or anything that's not covered by the stand...
How to Create an Ionic 4 Side Menu with Sub Menu Items Creating a side menu with Ionic 4 isn't that hard, but sometimes you need a multilevel navigation like an accordion to present your information in a m...