LOCAL NOTIFICATION IN IONIC CAPACITOR EXAMPLE

Share the post

Hello All, In the last topic we had discussed Firebase Push Notification in Ionic application. We already know that the importance of notification in our mobile application is how much important is! Now, After trying the firebase push notification we move ahead & integrate the local notification in our mobile application. So, In this topic, We will discuss Local notification integration in our ionic application with the help of example.

Why Local Notification is required?

Now, Before we start integration it’s important to know Why do we want to integrate the local notification if we already have firebase push notification integrated. Because, If we want to show a notification to the user which is necessary to show them even if they are not connected with internet. So, In short If you want to show firebase push notification then user must be connected with internet, but it’s exactly opposite in case of local notification. Below are the main focus points which are important in the case of Local notification.

  • serverless notification
  • allow to display notification on device
  • can schedule the notification as per our application needs
  • by showing notification we can kept user to busy with our application.

Steps to integrate local notification in Ionic application

Step 1 : Create a new project using following command

ionic start <appname> <template>

Step 2 : Install the dependencies using following commands

npm install @capacitor/local-notifications
npx cap sync

Step 3 : Create a common service to show a local notification

npm ionic g service local-notification
import { LocalNotifications } from '@capacitor/local-notifications';

....

constructor(){}

async showLocalNotification(id : number, title : string, text : string){

LocalNotifications.schedule({
notifications:[
{
    title : title,
    body : text,
    id : id
}
]
});
}

Add this dependency in app.module.ts

Step 4 : Add a button to show notification

<ion-button expand="block" (click)="sendLocalNotification()">
Send Local notification
</ion-button>

Step 5 : Add below code to your ts file

import { LocalNotificationService } from ../local-notification.service
constructor ( private localNotification : LocalNotificationService ) {}

sendLocalNotification () {
  this.localNotification.showLocalNotification ( " TITLE ", " TEST NOTIFICATION " , 1 );
}

1 thought on “LOCAL NOTIFICATION IN IONIC CAPACITOR EXAMPLE”

Leave a Comment