Independent Notification service using Ionic, Node & FCM

Shubham Rath
Jul 4, 2018 · 6 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

    // Post the token to your node server
this.http.post("http://<ip_address_of_node_server>:3000/store", token)
.subscribe(data => {
console.log(JSON.stringify(data));
}, error => {
console.log("err");
console.log(JSON.stringify(error));
});
}

// Listen to incoming FCM messages
listenToNotifications() {
return this.firebaseNative.onNotificationOpen()
}
}

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.

app.get('/', (req, res) => {
res.send('Notifications Test!');
});

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

Image for post
Image for post

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

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store