Push Notification on Android device using Icenium Everlive

Download sample used in this blog post from Github

Learn more about Icenium

In this post we will walkthrough working with Icenium Everlive Push Notification on an Android device. This post is divided in three parts from creating Google project to writing JavaScript code to enable notification on device.

Let us follow following steps to get it started with push notification on android devices

Step 1: Configure or Create Google Project

You need to start with creating Google Project. You need Google project ID to enable Push Notification.

  • Navigate to https://code.google.com/apis/console
  • In drop down you get an option to create a new project. From there create a new project
  • After creating project, you will get project number. There are two ways you can find project number, either in URL or on dashboard

image

After creating Google project, from left hand options select API Access. In that go ahead and click on Create a New Android Key. We need Android key at Everlive server side to enable Push Notification

image

After getting Android key next step you need to do to enable Service. To enable that click on Services in left and On Google Cloud Messaging for Android.

image

As of now we have created Google Project.

Step 2: Create and Configure project in Icenium Everlive

To create Icenium Everlive project, navigate to https://www.everlive.com/ . To create new project click on Create New Project on the home page. After successful creation of project go to Settings

image

In Settings select Push Notification from left menu options. We are going to enable Push Notification for Android, so check the check box of Android and provide Android Key created in previous step.

image

Step 3: Create Application

In this step we will create application to work with push notification. We will us EverLive JavaScript SDK. You can download sample Sample App from GitHub here

To start with you need following JavaScript files in your application. You can get these files from downloaded sample.

image

Now to start with, you need EverLive API key of your project and android project number. You will find API key on EverLive portal and android project number which you configured in step1 of this post.

image

As of now we have created environment in application to work with EverLive SDK for PushNotification. Next we need to create pushSettings for Android. You may notice that we are passing androidProjectNumber to create push setting for android.

image

Next you can enable notification on device by calling enableNotifications function and passing setting for push notification as input parameter in that. On successful enabling we are returning registration of device.

image

After enabling notification on device you need to register device in Everlive portal. To do this call register function on instance of current device.

image

These are two operations you need to perform to get push notification on android device from Everlive push notification. I have created two buttons on app view to enable notification on device and then register device to get push notification. View with buttons are as follows,

 <div data-role="view" id="pushview" data-tile="Push" data-model="app.pushService.viewModel" >
 <a id="initializeButton" data-role="button" data-bind="click: enablePushNotifications" class="btn-big">Enable Notifications</a>
 <a id="registerButton" data-role="button" data-bind="events: { click: registerInEverlive }" class="btn-big">Register</a>

 </div>

Below find full code to enable and register device for push notification.


(function (global) {
 var everliveApiKey = 'I1eE4AuOaWv0Vp5y';
 var androidProjectNumber = '1088191728786';
 var emulatorMode = false;

var pushViewModel = kendo.data.ObservableObject.extend({

el: new Everlive({
 apiKey: everliveApiKey
 }),

message: function () {
 alert("dhananjay");
 },

onAndroidPushReceived: function (args) {
 alert('Android notification received: ' + JSON.stringify(args));
 },
 enablePushNotifications: function () {
 // Push Setting for Android
 var pushSettings = {
 android: {
 senderID: androidProjectNumber
 },
 notificationCallbackAndroid: this.onAndroidPushReceived,

};
 // Setting the current device
 var currentDevice = this.el.push.currentDevice(this.emulatorMode);
 currentDevice.enableNotifications(pushSettings)
 .then(
 function (initResult) { return currentDevice.getRegistration();
 },
 function (err) {
 alert("ERROR!<br /><br />An error occured while initializing the device for push notifications.<br/><br/>" + err.message);
 }
 );

&nbsp;
 },
 registerInEverlive: function () {
 var currentDevice = this.el.push.currentDevice();

if (!currentDevice.pushToken) currentDevice.pushToken = "some token";
 this.el.push.currentDevice()
 .register({ Age: 15 })
 .then(
 this.onDeviceIsRegistered,
 function (err) {
 alert('REGISTER ERROR: ' + JSON.stringify(err));
 }
 );
 },
 onDeviceIsRegistered: function () {

alert("device registered");
 }

&nbsp;
 });

app.pushService = {
 viewModel: new pushViewModel()
 };

})(window);

&nbsp;

After successful operations on device, you will find device is registered in Everlive portal as below. All device registered for application will be listed here.

image

Now you can send push notification to device from portal. Device is enabled and registered to receive push notification from the Icenium Everlive server. We just witnessed that it is so easy working with push notification on Android devices from Icenium Everlive server. I hope you find this post useful. Thanks for reading.

Download sample used in this blog post from Github

Learn more about Icenium

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s