Sending Out Android Push Notification with Ionic.io to Your Users

Many people have requested this article via Twitter, Email or comments. Now I finally found some time to show how to easily set up real Android push notifications with the Ionic.io service!

In this tutorial I will guide you step by step through the process of creating a simple demo app with Ionic, connecting it with the Ionic.io services, how to set up everything inside your Android developer console and finally how to send out push notifications to your device.

The process may look scary or a bit tricky from the outside, but in fact there are just some really simple steps, so let’s start!

Setting up our simple demo App

As said before, we start with a new Ionic app. It doesn’t matter which template you take, for now I will just use the standard which is the tab bar template. Go ahead and create the project by running:

ionic start devdactic-android-push
ionic add ionic-platform-web-client
ionic plugin add phonegap-plugin-push
ionic io init

As you can see we also add a required Ionic package which makes life a lot easier, and also a phonegap plugin for push notifications which allows to customise our received notifications.

We also connect our app to the Ionic.io services, which requires you to insert your credentials for the platform. If you don’t have them by now, go ahead and create an account, it’s still free!

Making a Simple Demo Push

Sending out a debug push is a great way to check if your app is connected to the Ionic.io services properly. Therefore, go ahead and open your app.js and add this to your .run function at the top:

$ionicPlatform.ready(function() {
  var push = new Ionic.Push({
    "debug": true
  });

  push.register(function(token) {
    console.log("Device token:",token.token);
  });
});

We create a new Push object which has the debug mode enabled, and also register our device to the push service. This will log a device id to your console, so now you can start your app with ionic serve and should see the device token logged. Copy that token!

Open the Ionic.io Dashboard and select your just created app.

In the push section, click on “Want to send a one-time notification?” and insert a title, text and most important your copied device token.

Observe your browser where the app is still running and you should see an alert come up like this:

That was our first step towards a real Android Push Notification. The next steps are just as easy as before, and if you hook up everything correct this will be smooth sailing.

Setting up App and Android Keys for Push

To get the Push Notification from the Android Messaging Service, you have to grab some keys from a real Android app. Therefore, you will need an Android Developer Account which costs 25€ or whatever your local currency is.

Ionic describes this process for getting your keys, so follow these steps and come back if you created your app and API key after those steps: Android Setup for Push Notifications

Now you need to copy 2 keys:

1. Your Google API Key, which is in the APIs & Auth -> Credentials section of the Developer console
2. Your GCM project number, which is just your project number on the dashboard

Replace the keys in the following lines with your values, and also run the third one to turn off your development mode (shit just got serious!)

ionic push --google-api-key your-google-api-key
ionic config set gcm_key your-gcm-project-number
ionic config set dev_push false

This will set all the required keys for the Ionic.io push service, so the last thing we need to change is a bit of code.

Remove the before added code and instead add this piece at the same location inside your app.js:

$ionicPlatform.ready(function() {
    var io = Ionic.io();
    var push = new Ionic.Push({
      "onNotification": function(notification) {
        alert('Received push notification!');
      },
      "pluginConfig": {
        "android": {
          "iconColor": "#0000FF"
        }
      }
    });
    var user = Ionic.User.current();
    
    if (!user.id) {
      user.id = Ionic.User.anonymousId();
    }
    
    // Just add some dummy data..
    user.set('name', 'Simon');
    user.set('bio', 'This is my little bio');
    user.save();
   
    var callback = function(data) {
      push.addTokenToUser(user);
      user.save();
    };
    push.register(callback);
 });

This code will again create a new Push object, but this time we also catch the onNotification event and we also specify an Android color attribute for our received notifications.

We then use the Ionic.io user service, which helps to gather the token we need to send a push and also this allows to send push notifications to specific segments of users. If our user has no ID by now, we generate a new anonymousId.

The next lines just know how to set some properties for a user, they might no be mandatory here but just you guys know what’s possible.

The more important part is the end and the callback function, which is called after registering to the Ionic.io push service. Here we add the Token to the user and also save the user object once again.

Sending out Android Push Notifications

At this point everything should be fine, so go to the Ionic.io Push tab and you should be able to send a real push notification (while before it was not connected cause you had not pushed your keys!)

Run your app on your Android device, and check the users section of your Ionic.io dashboard for a new registered user. At this point, I sometimes had no Android device token for whatever reason. If you also encounter this problem, just leave me a comment below!

If you have the token, we can start the fun!

From your dashboard, you can send one time notifications for specific device tokens, or you can also send Notifications at a specific time to a specific subset of users. The first option was working better for me, meaning it was quite instant while the later one got me some headache because it was delayed sometimes.

If you are more into the command line, you can also send out a push to a list of devices very easily with this curl command:

curl -u PRIVATE_API_KEY: -H "Content-Type: application/json" -H "X-Ionic-Application-Id: APP_ID" https://push.ionic.io/api/v1/push -d '{"tokens":["DEVICE_TOKEN"],"notification":{"alert":"I come from planet Ion."}}'

If you are on your Android device and the app is closed, the result will look like this in your Notification center:

So that’s all you need for Android Push Notifications with Ionic!

If you want to see more of the Ionic Framework, take a look at my online courses on the Devdactic Codeschool

I would be happy to welcome you in one of my courses!

Also find a video version of this article below.

Code on,
Simon

The post Sending Out Android Push Notification with Ionic.io to Your Users appeared first on Devdactic.