Ionic 4 | Show Local Notifications in Ionic 4 Application using Native Plugin

Some of the applications may have some operations running on the device without any need for network connections. In that case, we may want to show some type on notifications like reminders, alerts of some notifications other then push messages. Such type of notifications which are pushed by the locally installed app in the device is local notifications. 

In Ionic 4 applications its possible to show local notifications with a variety of flexible options like ID, custom sound, text, title, LED color customizations, etc.

Here we will create a new Ionic 4 Application with a blank template to demonstrate the different type of local notifications with example.

Let’s get started!

Update Ionic CLI

First, make sure you have the latest version on Ionic CLI installed on your system. Run following CLI command to update Ionic CLI to the latest version

 

Create an Ionic Application

To demonstrate Ionic local notifications we will create a new Ionic application. If you already have a running application just use that. Run following CLI command to create a new Ionic application with a blank template.

Install Cordova and Native Local Notification Plugin

After creating and moving to app folder in CLI we will install Cordova and Ionic native plugin for Local Notifications to work in the application.

Run following CLI commands to install the native plugin.

Import Local Notification Plugin in App Module

To use local notification we need import local notification then add in providers array. Open app.module.ts file then make the following changes.

Use Local Notification in Home Component

To create a Local notification we first need to import it in component then call schedule method with options.

Add the following buttons in the home.page.html file.

then add three types of example methods with different options in home.page.ts file

We can show single or multiple notifications at once but should have a unique id value.

Options

id: A unique identifier required to clear, cancel, update or retrieve the local notification in the future
title: First row of the notification
text: Second row of the notification
sound: Uri of the file containing the sound to play when an alert is displayed
data: Arbitrary data, objects will be encoded to JSON string
icon: Uri of the icon that is shown in the ticker and notification
smallIcon: Uri of the resource (only res://) to use in the notification layouts.
color: RGB value for the background color of the smallIcon.
vibrate: Use the default notification vibrate.
led: {
color: string;
on: number;
off: number;
} | any[] | boolean | string;
/**
* ANDROID ONLY
* Define the blinking of the LED on the device.
* If set to true, the LED will blink in the default color with
* timings for on and off set to 1000 ms.
* If set to a string, the LED will blink in this ARGB value with
* timings for on and off set to 1000 ms.
* If set to an array, the value of the key 0 will be used as the color,
* the value of the key 1 will be used as the ‘on’ timing, the value of
* the key 2 will be used as the ‘off’ timing
*/
silent: Is a silent notification
wakeup: Wakeup the device. (default is true)
trigger: When to trigger the notification
sticky: Set whether this is an “ongoing” notification.
autoClear: Make this notification automatically dismissed when the user touches it.
lockscreen: If set to true the notification will be show in its entirety on all lockscreens.
foreground: Make this notification show when app in foreground.

 

So by using a Local Notification native plugin, we can easily show customized notification from an application itself on the device. you can check more options and examples here

 

Leave a Reply

avatar
  Subscribe  
Notify of