Push Notification recommendations for a messaging app

[richardmarais]

Hi All,

I am using an Ionic 2 front end and a Wildfly Server with Java services. I am developing an app to run on Android and iOS (and possibly Windows).

I am also developing a messaging service in the app (similar to Whatsapp) using sockets.io. This works perfectly when the app is running and the app is listening for the events and sends and receives messages.

I do now need to cater for when the app is closed. So I was thinking the solution would be to use Push Notifications, that would alert the user that they have a new message.

Is my plan correct? Does anyone have better advise? Are there any examples out there?

Thank you

[schankam]

I would say your plan is correct and I adopted a similar approach in a messaging app in the past and it was working well. I think a lots of messaging app are actually working on this model, I don’t see any other way to do it.

[richardmarais]

Thanks schankam. Do you have any examples or references guide to use the correct implementation?

For example, should I use GCM (Android) and APNS (iOS) services? I want to keep this a simple as possible, but don’t know enough to know what all the options are.

Here (base & server) is an example using the above services (GCM & APNS), but I don’t know if this is the best solution?

[schankam]

If you are using ionic2, you should use the Push plugin available in ionic native: http://ionicframework.com/docs/v2/native/push/

You can use GCM for Android AND iOS; Or you can also use GCM just for Android, and APNS just for iOS (This is what I am doing).

Apparently you are using java, so you will need to implement this serverside (but this is usually quite easy and I believe you will find a lots of resources on how to do it correctly).

You app just need to transmit to your server a unique token by user that will be generated by the push plugin.

[schankam]

Here is a simple example on how to have a basic push system working in your app using Push in ionic-native:

At the top of your file:

import {Push} from 'ionic-native';

Then inside the platform ready block:

this.platform.ready().then(() => {
  let push = Push.init({
    android: {
      senderID: "YOUR_ANDROID_SENDER_ID",
      vibrate: true,
      sound: true,
    },
    ios: {
      alert: true,
      badge: true,
      sound: true,
    },
    windows: {}
  });
  // The following code will give you the unique token I was talking about (it's called registrationId)
  push.on('registration', (data) => {
    console.log(data.registrationId); // Send this to your server for the given user, keep in mind that it can change and should be send to your server if it has been updated
    }, error => {
      console.log(error);
    });
    // This callback is called whenever your app receive a push notification (foreground or background)
    push.on('notification', (data) => {
      console.log(data); // here do what you have to do with the data (you can pass any data you want from your backend); You can redirect the user to the given chat, where you will synchronize all the unread messages since this one in the chat for example.
    });      
});

[richardmarais]

Thank you very much for your help.

[schankam]

Welcome, I know it was not very clear but no time to write a full solution here haha. Hope it could help

[richardmarais]

With your example above, I get:

TypeError: push.on is not a function

Is that maybe old api?

I have also tried the following with the same error:

push.on('registration', function (data) {
  console.log('++++++++++++++++++++++ FIRE ON!!');
  alert(data);
});

[richardmarais]

Also, once I get Push Notifications working,

1. What is the best way to get the new messages to be sent to the user?
2. I am using sockets.io for my chat app, when the app is open it listens for those events. When a new messages comes in, and the app is not open, should it write to the local storage?
3. What should the Push Notifications payload be? My message required a message, datetime, fromUserId, toUserId

Thanks

[schankam]

Here are more information on the behavior of the Push plugin: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md

I don’t know why you are getting this error, I copy paste the code I am using in my app and it is working fine for me. Could you paste here your whole app.ts file ?

Also, did you install ionic native ?

[schankam]

1. There is no “best way” I guess, it really depends on your implementation.
2. Here are different ways to store data on the client side, check which one suits you the best. (To me, you shouldn’t use local storage in your case for example).
3. The payload can be whatever you need, as long as it looks reasonable to pass the data you’re willing to pass in the push (e.g: even if it seems obvious, you DON’T WANT TO send an entire base64 encoded image data here)

I will try to give you an example of what you could (not saying this is the only viable solution) implement in your application, since you seems a little bit lost about how to do it.

First, at the push level in your app, you need to understand that there is 2 different situations you need to deal with:

1. You receive a push when the user is currently using the app
2. You receive a push when the user is not using the app (closed, or background)

In the first case, the callback you defined for the ‘notification’ event will be called, and you can determine that you are in the first case thanks to the data.additionalData.foreground variable:

push.on('notification', (data) => {
    console.log(data.additionalData.foreground); // It will be true
  }
});

If you are in the second case, this variable will be false.

What is interesting here is that it will give you a lots of different situations to deal with depending what is the current state of your app; for example:

-Let’s say we receive a push notification when our user is using the app. Is the user currently on the chat page or an other one ? If he’s not, you probably should display a notification somewhere on your UI (A little red number on your chat icon in your app menu ?); if he is, you can just directly display the message in the chat.

But wait a minute, isn’t it what you are probably already doing with socket.io ? I guess it is ! So let’s skip our case number 1. (Assuming that your server knows when your user is active on the app, you are not transmitting the information by using push, but by using your connected socket).

What you are apparently interested in, is what should happen when your user is not in your app and you receive a push notification ?

Well, if your user is going to click on the push notification (on the lock screen or in the notification center), the callback will be called, and you will find yourself in case number 2.

Here are different options, because it is not guaranteed that the push notifications the user clicked on is the one containing the last sent message information (maybe he received 6 messages and clicked on the 4th notification).

So I would suggest you that in any case, when navigating to your chat, you always need to update it and to synchronize it with your server. The push notification data will be just here to help you to display the right information to your user (for example, putting himself on the chat right at the place where is the message corresponding to the push notification he clicked on).

I am not sure that I am very clear in my explanations, dealing with push notification at the client side being way more complex than it may look if you want to give your users a good UX.

The thing is, depending on the way you implement it, there are thousands of different ways to handle the problem.

Also, although not directly related, but since you mentioned it I wanted to give you an advice about storage:

You should not store too much data in the client side. You should maybe store only the last 20 messages the user read, and if he wants to go back in his history, just fetch it by chunks from your server. It is useless to store thousands of MB of chat data, knowing that most of the time users are not going to use them. You shouldn’t as well fetch and store data when the user is not using the app, like I suggested just synchronized your chat state with your server when your user is browsing to it.

[richardmarais]

Hi schankam,

Thank you for all the information. I will have a read, and then get back to implementing it.

Appreciate it.