Send Push Notification via ionic 5 and Cordova

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.

Configure the firebase on Firebase console

Open the terminal and click on Add Project…

Enable google analytics and other usual thing…

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.

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

Setup 4 :Install firebase along with Capacitor setup:

$ ionic cordova plugin add cordova-plugin-firebasex
$ npm install @ionic-native/firebase-x

Import the firebaseX module in 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

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

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

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

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.

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

Thanks,

Yogesh Patil