Independent Notification service using Ionic, Node & FCM

Shubham Rath
Jul 4, 2018 · 6 min read

We all have seen the push notifications that an app does in android or IOS. How can we implement that using Ionic? Moreover, how to regulate such a service? In this article we will create a completely independent notification service that will be able to send push notifications to both Android & iOS. We will be using Firebase Cloud Messaging service for the push notifications.

Step 1

Create a new ionic application. I am using the tabs template here.

Step 2

Install the required dependencies for native support.

Now import them in your app.module.ts.

You can get the config file in your https://console.firebase.google.com/. Click on Add another app and then click on Add Firebase to your web app.

Step 3

Register your iOS and android device with Firebase. Click on Add Firebase to your Android/iOS app. You can get/change the package name from your config.xml file of your ionic project.

Type in your package name and click Register app. Now download the google-services.json file and keep it in the root of your ionic project.

If you had clicked for iOS, you will get a GoogleService-Info.plist instead of the json file.

Step 4

Generate a firebase cloud messaging provider that we will be using in our app.

Now let’s write the provider code which will be responsible for sending notifications to the firebase cloud. Copy the below code to fcm.ts provider.

We want to extract the token and send it to the server once the app is opened. So copy the below code to app.component.ts

Step 5

Now we are done with our app configurations. Let us build our node server which will

  • receive the devices’ token
  • store the tokens in a database
  • extract the existing tokens from database
  • send notifications to all of them

Create a folder named node-server and create a server.js file in it. Create an empty package.json file by typing the below command.

Copy the below contents to the package.json file and run npm install to install the dependecies.

Step 6

Install and configure mongoDB in your system as per the official docs. Once you are done installing mongoDB, run it in shell using:

Create a new database:

Step 7

Open up the server.js and import all the installed modules.

We will use bodyParser to parse the http response.

Allow the CORS access control for testing in localhost. (Not for production)

Initialise your mongoDB database with node.

The post method to store the tokens to database.

Now, configure your Firebase Cloud Messaging configs.

You can get the server key in your app settings -> Cloud Messaging

Now write your fcm get method which will be responsible to send messages to the firebase cloud and the later in turn will push notifications to your phone.

Step 8

Now install the app in your device by running:

Once the app opens up, a token is sent to your local server and stored in your database. Now if you make a get request to the url: http://<ip_of_your_machine>:3000/send a notification will be sent to your device.

Note: Both the phone and your computer should be in the same network or-else, you have to use ngrok to expose your local server.

Github repo for this project: https://github.com/sr6033/node-ionic-notifications

hirewithparam

Param.ai is an intelligent platform built for recruiters to discover new candidates and engage with them using smart algorithms.

Shubham Rath

Written by

Software Engineer @ Goibibo. Writer in GeeksforGeeks. Former SDE @ param.ai. ACM ICPC Regionals 2018.

hirewithparam

Param.ai is an intelligent platform built for recruiters to discover new candidates and engage with them using smart algorithms.