React native remote push notification Integrate remote push notification GCM, azure hubs and react native in android

Spread the love

React native remote push notification GCM, Azure hubs in android

Hi every one, I have finished integrating react native remote push notification with GCM and azure.
I realized that there is not many articles talk about this, it took me some days to figured out how to do.
Today is weekend, I decide to write it here, hope it can help others in some cases.

Before starting, I would like to say “sorry for my poor English”, if you guys don’t understand any part of this article, just let me know, I can fix it.
Everything can be fixed, right 😀

OK, Lets begin.

Firstly, we are going to use this third party library (https://github.com/zo0r/react-native-push-notification) to help doing some stuff behind the scene.

Just follow the instruction on that page and install the lib to your project.

I just have a notice here, you could get a building error after installing the lib even you followed exactly the instruction :D.

No worries, I’m here to help you.

The reason is the path to your project is still fine until you install this push notification lib, there could be two reasons here:

  1. Your project path is long, when combine with this lib, there are something inside this lib which has the path is also long -> error
  2. Your project path has space between -> error

How to fix : you just need to change your project directory to a new place which has a path as sort as possible.

If it’s still not working after changing the to the new sort path, then try to choose another path without space between.

We have finished the first step to install push notification lib.

Lets move to next step: register a GCM server.

To do it, navigate to this page (https://console.developers.google.com). Click to Google Cloud Messaging url

Previously, it will navigate you to google cloud messaging page, but starting from Sept. 2016 new server key can only be created in the Firebase Console using the Cloud Messaging tab of the Settings panel.

This is google policy, so we just need to follow them.

On this page, click on Go to console. It will navigate us to firebase management screen.

Click “Create new project”. Fill up the fields and click Create to create a new project.

When creating process is finished, it will navigate you to management screen.

Click to Project settings to get into the setting page.

Click on tab cloud messaging

Ah, from this page we can see the server key and sender id. These two values are very important, we will use them right now in the next step.

We have finished creating FCM (Firebase cloud messaging) server.

This server in charge of listening event from our azure hubs and send notification to client (android or ios phone).

Now, we continue setup our azure server to connect to FCM.

To to that, you can follow the instruction from Microsoft, link here (https://docs.microsoft.com/en-us/azure/notification-hubs/notification-hubs-android-push-notification-google-gcm-get-started).

It that document, they also guide us how to create GCM server, but that doc is obsoleted, that why I had to create a new instruction above.

Follow that document will help you connect to FCM server, only one thing I should mention here is that the server key which is created in above step now is using in azure in this step.

I won’t mention how to create service to send notifications from your system to azure, the reason is that I’m not back-end guy so I’m not good at this part.

But you can follow the instruction from the URL which I added above to setup it by yourself ( it’s a good document by the way :D).

Okay. We have finished connecting FCM to azure.

Now move to next step, configure our react native app connecting to FCM server (should be interesting and easiest part).

Lets open the code.

Now you can see, we are using sender ID which is created in above step (FCM settings page).

In this step, you don’t need to care about onRegister event, I will explain you guys later. So, to make the phone to be able to connect to FCM, very simple, just follow these steps:

  1. Create a component
  2. In componentDidMount event, write code to config push notification which is mentioned clearly in the push notification document
  3. Add the sender ID(collect it from FCM server, settings page)

That’s it. You should be able to connect and receive push notification from now.

One notice here: remote push notification is not working in genymotion (not sure why, the reason could be because of I’m using free version of it).

Anyway, what I mean is that lets use real devices to test it.

Now your devices can receive notification, but the thing is we are receiving all notifications, it’s not really good in some cases.

For example: in Facebook, if we post a new feed, we want only users who commented or liked that post will receive notification, not all.

If you did not comment or like that feed, you should not receive any notification related to that post, it’s very annoying if you haven’t touched that post but keep receiving notification from that post.

To restrict them, we will move to next step.

In this step, we will restrict notifications which are send to corresponding users only. The idea is:

  1. From client (android or ios phone), connect to FCM and register a token ID
  2. Send token ID and user information (such as user ID, user role, …) to our server (back-end) for notifying that I have registered to FCM and received this token, please handle and send correct messages to me, don’t send all messages  or I’ll kill you.
  3. Server received those information, base on those information (user id, user role …), handle the messages and send to FCM with token id.
  4. Base on the token id which received from our server, FCM server send the corresponding messages to client.

As I mentioned above, I will not guide you how to do from back-end side, the attached link will help set it up.

But from front-end side, I’ll give you guys a hand :D.

Now, it’s time to use the event onRegister, this event will be fired when app open and return a token id, use this token send to server.

In case of you are using azure, then the endpoint should contain two parameters: RegistrationID and Platform (gcm, apns, wns).

  1. RegistrationID is token id,
  2. Platform: gcm (google cloud messaging). apns (push notification server from apple), wns( window notification server).

Now, let me see if I miss anything.

hmm …. I think it’s pretty enough for you guys to start integrating with GCM now.

If you have any inquiries, just leave a comment or send me message by mail baotoan1905@gmail.com, skype: baotoan1905, facebook: baotoan1905@gmail.com

Chào thân ái và quyết thắng.

Leave a Reply

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