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 Capacitor 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
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? Yes
If see the above question … Choose Yes. It will integrate the Capacitor instead of Cordova 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:
$ npm install cordova-plugin-firebasex $ npm install @ionic-native/firebase-x $ ionic cap sync
Import the firebase 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 add android and iOS native platform in your app
$ ionic capacitor add android $ ionic capacitor add ios
$ npx cap open android
Add google-service.json file in to /android/app folder.
Run the project in Android Studio.
Send In-App message via Firebase Console.
That’s it. You are successfully send a In-App Message via ionic 5 and Capcitor.