Push Notification

Send Push Notification via ionic 5 and Cordova

Posted by
Send Push notification
We guide step by step tutorial on sending Firebase Notification on Mobile App using Ionic 5 and Firebase Cloud Messaging (FCM)

Indexing of development :

  • Setup and install the ionic framework
  • Configure the firebase on Firebase console
  • Create an ionic 5 application and platform setup
  • Install firebase along with Cordova plugin setup
  • Run and test the project

Required tools :

  • Node JS
  • Angular 8
  • Ionic 5
  • Cordova
  • Google FCM
  • Ionic 5 Cordova Native FCM
  • Terminal or Command Line
  • IDE or Text Editor (We are using Visual Studio Code)

Let’s start the development

Make sure you installed the latest Cordova CLI version 9.0.1. if not, kindly install via below command and restart the terminal or command prompt.

$ npm install -g cordova

Before going move-forward and according to the principal steps, we believe that you have already to install NodeJS. If not, kindly download it using the link: NodeJS

Step 1: Setup and install the ionic framework

$ sudo npm install -g ionic
$ sudo ionic -v

You need to install the ionic framework, to full-fill the requirement to create an ionic project.

Ionic Installation
Install the ionic framework and check the version

Configure the firebase on Firebase console

Setup Firebase
Setup Firebase

Open the terminal and click on Add Project…

Enter your project name

Enable google analytics and other usual thing…

Enable Google Analytics if you do so
Enter Google Analytics account name or choose existing one…
Google Analytics Confirmation
Firebase setup done

Step 3 : Create an ionic 5 application and platform setup

Now it times to set up the new ionic 5 application, please use the below command and run it to your terminal or command prompt.

$ ionic start send_push_notification blank --type=angular

  ? Integrate your new app with Capacitor to target native iOS and Android? NO

If you were ask the above question … Choose No. Though it will integrate Cordova instead of Capacitor as Native accessibility.

Send Firebase Notification
Send Firebase Notification
Send Firebase Notification
Send Firebase Notification
Send Firebase Notification
Send Firebase Notification

Now it’s time to move in to your app folder

$ cd ./send_push_notification

Run your app using below ionic command

$ ionic serve -l
Application is running on your Mac/Window default bowser

Setup 4 :Install firebase along with Capacitor setup:

$ ionic cordova plugin add cordova-plugin-firebasex
$ npm install @ionic-native/firebase-x
Send Firebase Notification
Send Firebase Notification
Send Push Notification
Send Push Notification

Import the firebaseX module in app-module.ts file

Import FirebaseX in root app-module.ts file

Replace the project appId in capacitor.config.json file, which will use as a package-name and bundle-id in android and iOS respectively.

In our case it’s : io.ionic.notification

Setup Project Name
Setup Project Name

Add Firebase console and choose a Project Setting from left-top most corner

Select the android icon button present in page
Enter package name : io.ionic.notification as we already add as appId in capacitor.config.json

Choose the Android package name : io.ionic.notification, which will use as package name in our android project

Download google-services.json file

Download google-services.json file and save it in your project root folder

Now back to the terminal/command prompt window and integrate the android native functionality, which basically add the all plugin in to android platform.

$ ionic cordova platform add android
Integrate cordova along with android platform

Add google-service.json file in to /android/app folder.

It’s covers all the firebase dependencies and also provide an accessibility of the firebase features to the app.

Run the project in Android Studio.

$ ionic cordova run android

It’s run your android app in to emulator or to the your device if connected.

Send In-App message via Firebase Console.

In_app Messaging
In_app Messaging

That’s it. You are successfully send Firebase Notification Message via ionic 5 and Cordova framework.

Thanks,

Yogesh Patil

Leave a Reply

Your email address will not be published. Required fields are marked *