FIREBASE PUSH NOTIFICATION IN IONIC 5 | HOW TO USE PUSH NOTIFICATION IN IONIC | PUSH NOTIFICATION EXAMPLE FOR CAPACITOR

Share the post

Hello All, In the last topic we discussed on How to implement an idle timeout in Ionic 5 mobile applications. Now, today, We Will discuss on How to use push notifications in the Ionic 5 application. We will see an example of it. We will use google’s firebase push notification in our application which is easy to use.

Nowadays, Modern mobile application is really advanced & it necessary to get in touch with the customer who is regularly using your mobile application. So, by integrating the push notification in your application you can able to send important updates or messages to your client/customer. So that customers can actually stay in touch with your application. The customer can start interacting with your application. In this tutorial, We are exploring the important steps which can help you to integrate the firebase push notification in Ionic 5 application.

Why Firebase Push Notifications?

  • It’s google service
  • Easy to use & integrate.
  • Cross platform messaging solution
  • Send notification messages to client

Steps to integrate push notfication in Ionic

Step 1 : Create new application in Ionic 5 using following command

ionic start <appname> <template>

Step 2: Add android platform to application

npx cap add android

Step 3: Install Capacitor plugin for push notification & Sync the application

npm install @capacitor/push-notifications
npx cap sync

Step 4 : Make the following changs in your ts file.

import {
ActionPerformed,
PushNotificationSchema,
PushNotifcations,
Token
} from '@capacitor/push-notifications';

Step 5: Copy below code in ngOninit()

ngOnInit() {
    console.log('Initializing HomePage');

    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });

    // On success, we should be able to receive notifications
    PushNotifications.addListener('registration',
      (token: Token) => {
        alert('Push registration success, token: ' + token.value);
      }
    );

    // Some issue with our setup and push will not work
    PushNotifications.addListener('registrationError',
      (error: any) => {
        alert('Error on registration: ' + JSON.stringify(error));
      }
    );

    // Show us the notification payload if the app is open on our device
    PushNotifications.addListener('pushNotificationReceived',
      (notification: PushNotificationSchema) => {
        alert('Push received: ' + JSON.stringify(notification));
      }
    );

    // Method called when tapping on a notification
    PushNotifications.addListener('pushNotificationActionPerformed',
      (notification: ActionPerformed) => {
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );
}

Step 6 : Go to Firebase console & Create a new project

register-push-notifcation-1
register-push-notifcation-1

Note : Make sure that yout android package name(appId) mentioned in capacitor.config.ts is same as you mentioned in firebase console project package name.

register-push-notifcation-2
register-push-notifcation-2

Note : Download the file google-services.json & move this file into following path

android->app->google-services.json

Step 7 : Run application on android device

After doing this you can run the application on android device using following command.

npx cap run android

Step 8 : Test the push notfication

Now, to test the push notification working correctly or not

Go to Firebase console Home page -> engage (Option available on left side menu) -> Click on cloud messaging -> Send your first message

Read More :

Firebase authentication in Ionic 4

Firebase in Native android project

1 thought on “FIREBASE PUSH NOTIFICATION IN IONIC 5 | HOW TO USE PUSH NOTIFICATION IN IONIC | PUSH NOTIFICATION EXAMPLE FOR CAPACITOR”

Leave a Comment