Local Notification with Ionic capacitor

 In this tutorial we are going to talk about local notification using ionic with capacitor. This similar to push notification in terms of looks and feel. Generally push notification are sent from server but they are sent from local device itself. 

To send to local notification you need to create first in UI end based on condition, For example you have diet app and in that you want to remind user for his time to time activity in a day based on his diet plan then you can schedule these notification in local device itself.

Note:- Local notification are completely free instead push notification are much expensive because to use push notification you need to use some external services(like Azure notification hub, OneSignal etc.) . They will charged you per notification.

Lets start, Today we are using official local notification plugin which is maintained by capacitor. To use local notification you need run following command in your app terminal window.

npm install @capacitor/local-notifications

You can configure some options for android like notification icon, icon color and sound 

In capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {

  plugins: {

    LocalNotifications: {

      smallIcon: "ic_stat_icon_config_sample",

      iconColor: "#e02a49",

      sound: "beep.wav",

    },

  }

};

To use custom icon and sound you need icon and sound inside android folder. You can use below mentioned location to place icon and sound file.

Icon - android/app/src/main/res/drawable-hdpi

Sound - android/app/src/main/res/raw 

Schedule Notification:- Now time for schedule your first notification. First you need to import plugin in your component 

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

Let's create a function to schedule notification

  sendNotification() {

    let scheTime = new Date();

    LocalNotifications.schedule({

        notifications: [

          {

            title: 'Unified Solution',

            body: 'Welcome to App',

            id: 1,

            schedule: { at: scheTime },

          }

        ]

      })

  }

Congrats, you have scheduled your first notification. Now time to check notification in your device.

Ionic Local notification provide two types of listeners you can use that to check whether notification is received and to get data which you send with notification.

Listener for where notification received 

LocalNotifications.addListener('localNotificationReceived',(noti : LocalNotificationSchema) => {

      console.log("PAST_NOTIFICATION", noti);

   })

Listener for when an action performed(click) on a notification

LocalNotifications.addListener('localNotificationActionPerformed',(noti : ActionPerformed) => {

     console.log(noti.notification);

   })

Note:- If your device entered in Doze(power saving) mode, your application may have restricted capabilities. If you need notification in Doze mode then schedule your notification using allowWhileIdle: true. Using option may have some restriction like these notification can only fire once per 9 minute, per app.

I hope you enjoy this tutorial, Keep learning.

Thanks!