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

14 comments

  1. Usually I do not learn post on blogs, but I would like to say that this write-up very forced me to try and do it! Your writing taste has been surprised me. Thanks, quite nice post. Candace Purcell Atlante

  2. You have made some good points there. I checked on the internet to find out more about the issue and found most people will go along with your views on this site. Kamilah Fran Kuska

  3. Everything is very open with a really clear description of the issues. It was definitely informative. Your website is useful. Thank you for sharing! Lorette Rubin Ilana

  4. hey there hayden,shout out from malaysia big fan.this was a sweet post. i wonder how long the sandcastle lastedTumblr still rocks though aside from the ever popular instagram.keep cooking! and do visit malaysia some time. The food is awesome Ferne Marvin Claudine

  5. Heya! I knbow this is kind of off-topic however I had to ask.
    Doees managing a well-established blog such as yours require a massive amount work?
    I’m brand new to writing a blog but I do write in mmy diary
    every day. I’d lie to start a blog sso I can share my experience and thoughts online.
    Please let me know if you have any reccommendations or tips
    ffor brand new aspiring blog owners. Thankyou!

Leave a Reply to yerli film izle Cancel reply

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