Firebase Message

Send In-App Message using Ionic 5 and FirebaseMessaging

Posted by
Send Push notification
We guide step by step tutorial on sending In-App Messaging 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 Capacitor 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

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? Yes

If see the above question … Choose Yes. It will integrate the Capacitor instead of Cordova as Native accessibility

Successfully installed

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:

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

Import the firebase 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 add android and iOS native platform in your app

$ ionic capacitor add android
$ ionic capacitor add ios
Android platform add successfully
$ 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.

In_app Messaging
In_app Messaging
In_app Messaging
In_app Messaging
In_app Messaging
In_app Messaging

That’s it. You are successfully send a In-App Message via ionic 5 and Capcitor.

Thanks,

Yogesh Patil

Leave a Reply

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