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
- 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.