How to Push Notification Using Ionic and Firebase For Cloud Messaging

[ad_1]

The comprehensive step-by-step tutorial on receiving a push notification on Mobile App using Ionic 4 and Firebase Cloud Messaging (FCM). We will use the Ionic 4 Cordova native FCM plugin for receiving a push notification and using Firebase API for sending push notifications from the Postman. A few years back, we have created a tutorial on receiving push notifications using Firebase Cloud Messaging with Ionic 2. Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install the new Ionic 4 CLI by open the terminal or Node command line then type this command.

You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.

1. Setup and Configure Google Firebase Cloud Messaging

Open your browser then go to Google Firebase Console then login using your Google account.

Next, click on the Add Project button then fill the Project Name with Ionic 4 FCM and check the terms then click Create Project button.

Push Notification using Ionic 4 and Firebase Cloud Messaging - Firebase Add Project

After clicking the continue button you will redirect to the Project Dashboard page. Click the Gear button on the right of Project Overview then click Project Settings. Click the Cloud Messaging tab the write down the Server Key and Sender ID for next usage in the API and Ionic 4 App. Next, back to the General tab then click the Android icon in your Apps to add Android App.

Push Notification using Ionic 4 and Firebase Cloud Messaging - Firebase Add Android App

Fill the required fields in the form as above then click the Register App button. Next, download the google-services.json that will use in the Ionic 4 app later. Click next after download, you can skip Add Firebase SDK by click again the Next button. You can skip step 4 if there’s no App creating on running yet.

2. Create a new Ionic 4 App

To create a new Ionic 4 App, type this command in your terminal.

If you see this question, just type N for because we will installing or adding Cordova later.

Next, go to the newly created app folder.

As usual, run the Ionic 4 App for the first time, but before run as lab mode, type this command to install @ionic/lab.

Now, open the browser and you will the Ionic 4 App with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that’s mean you ready to go to the next steps.

3. Add Ionic 4 Cordova Native FCM Plugin

To install the Ionic 4 Cordova Native Firebase Message Plugin, type this command.

Next, open and edit src/app/app.module.ts then add this import.

Add to @NgModule providers.

Next, open and edit src/app/app.component.ts then add this import.

Inject FCM and Router module to the constructor.

Inside platform ready of initialize app function, add a function to get FCM token then print out to the browser console.

Add this function to refresh the FCM token.

Add this function to receive push notifications from Firebase Cloud Messaging.

The above example of receiving a push notification from FCM will redirect to the other page with params of data. For that, next, we have to add a new page by type this command.

Next, modify src/app/app-routing.module.ts then change the new page route.

Next, open and edit src/app/second/second.page.ts then add this import.

Inject that module to the constructor.

Add a variable for hold data from router parameters.

Add this line to get data from the router parameters.

Next, open and edit src/app/second/second.page.html then replace all HTML tags with this.

If you plan to send push notifications to the group of topics, add these lines inside the platform ready.

To unsubscribe from the topic, add this line.

4. Run and Test Sending and Receiving Push Notification

Before running this Ionic 4 app, we have to copy the downloaded google-services.json file to the root of the project. Type this command to add the Android platform.

Next, copy the google-services.json to the platform/android/ directory.

Next, run the Ionic 4 App to the Android device by type this command.

After the app running on the device, check the console from Google Chrome by type this address chrome://inspect then choose the inspect link. You should take to the browser inspector, just change it to the console tab.

Push Notification using Ionic 4 and Firebase Cloud Messaging - Chrome Console

You can take and write down the FCM token for use by Postman. Next, open the Postman application from your computer. Change the method to POST and add this address https://fcm.googleapis.com/fcm/send. On the headers, add this key Content-Type with value application/JSON and Authorization with value key=YOUR_FIREBASE_KEY....

Push Notification using Ionic 4 and Firebase Cloud Messaging - Postman Headers

Next, add this JSON data to the RAW body.

If you want to send by topics recipients, change the value of to to topics/people. Next, click the send button and you should see this response.

If you tap on it, it will open the App and redirect to the second page with this view.

Push Notification using Ionic 4 and Firebase Cloud Messaging - Ionic 4 Second Page

That it’s, the example of receiving push notifications using Ionic 4 and Firebase Cloud Messaging. You can grab the full source code from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ion2FullApp ELITE – The Complete Ionic 3 Starter App and save development and design time.

Leave a Reply

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