Ionic 2 – Sending push notifications to specific devices (Part 2)

Hi Friends,

Hope you are all well. This post is a response to several of our friends asking me to write one on sending push notifications only to certain devices and also to send notifications automatically from a program. So I have decided to split this into two.

Part 1 – Writing trigger functions on a database using Firebase cloud functions

Part 2 – Receiving push notifications on your device based on device tokens.

This post will be covering part 2.

Kindly read part 1 before you continue. Thanks.

Let’s begin.

A video screencast of this post.

The complete code for this post is available here.

Now, before we start, Firebase cloud functions is nothing but a suite of services made available to the user to write code and perform various functions based on their business requirement. This written code can then be deployed onto your firebase and this will hence be highly useful for various functions such as real-time triggers,  performing database cleanups or integrating with third-party APIs. In short, instead of running complex, memory intensive tasks on your device, you could do it on the cloud.

First install the firebase-tools using the below command.

Once, it’s installed login into firebase using this command

After logging in, give the below command to initialise a firebase app. (It’s highly recommended you do it in a directory you created for this app, and to create a new app in firebase console as well).

You will see a screen like this.

fireinpicedit

Choose your project in this screen and if it asks to install your node_modules choose yes.

Once it’s all done you will get a directory structure like this.

fireinpic2

Open up index.js and just add the code shown below.

Let’s break this down.

On first, glance this looks similar to Node.js code right.. Or in simple terms just javascript code. That’s right.. We are just writing code and deploying it on our firebase cloud that keeps running.

These two lines are the key to triggering our function. Whenever a message gets written onto the messages collection in our firebase db this function will get triggered.

We get the data that was written on the node when this function got triggered using the

event.data.val() code.

Alright, now that we have the data let’s send it to our pushtokens.

That’s exactly what happens in the above line.

But, wait.. Our tokens in the pushtokens collection are of the format.

Let’s just pull out the children first i.e., uid & devtoken.

So we are calling the processtokens function and passing all the tokens to it.

We are just using a simple for loop to iterate through the json and pick out the children. We then push it into an array and send it back to the calling statement.

Then, we extract the devtoken alone using another for loop.. (As, I type this, I realise that I could have done this in the processtoken() function itself.. whatevs)..

Now that we have the tokens, it’s just sending., wait.. What do we send..?

The message ofcourse, we just create a payload object with two fields called notification and data.

The notification is used to describe how the notification should look on the notifications tray and what it should contain, whereas the data would be the one that contains the actual message.

We then send this payload to all the tokens.

That’s it guys. This is the code that’s going to run on our firebase cloud. To deploy this, just use the below command.

Before testing this on your mobile app kindly ensure that you have a messages collection and a pushtokens collection on your firebase db that looks like this.

fireinpic4edit

(Sorry about the crude redaction)

After it is successfully deployed, open up your mobile app (which we created in part 1) and click on the button.

  1. It will login and then store a message on the messages collection.
  2. You will receive a push notification on the device. (Alert if you have the app open on the foreground, else it will be pushed onto the notification tray).

That’s it. Pretty easy right.

Hope this helps you guys. If you found it helpful, kindly share it with someone else and help them too.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!
  • niken riyanti

    hi raja.
    thaks for showing this good tutorial :)

    i tried your tutorial in this part, but when i tried to deploy my firebase, it got an error like this.

    Error: Server Error. read ECONNRESET

    what should i do?
    why that error message comes out? is that because of my connection?

  • Diogo Dumas

    hello raja,I followed the steps and the message appears in the firebase but it does not arrive on the phone. can you help me?

    • Niraj

      same problem as your ….have you solved it.

  • Unnikkannan

    Everything working fine for me. I just want to go little further on this. Is there any way to navigate to a page on the notification click?? What i have tried is given below.

    FCMPlugin.onNotification(function (data) {
    if (data.wasTapped) {
    this.nav.push(‘HomePage’);
    } else {
    alert(JSON.stringify(data));

    }

    }, function (msg) {

    console.log(‘onNotification callback successfully registered: ‘ + msg);

    });

  • jitendra

    Hello raja yogan, i am getting this error when following this video..

    TypeError: rawtokens[Symbol.iterator] is not a function
    at processtokens.then (/user_code/index.js:15:29)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)

    warning Pushtrigger Unhandled rejection

  • jitendra

    hello raja yogan, how we can write click action after getting a notification for open a particular page?