Pushbots and Cordova – Easy Push Notifications for your app

A few days ago Francisco Merino requested a post for implementing push notifications for a Phonegap/Cordova app. He was looking for a simple solution to start off. So, here is the post.

In this post, we will be sending push notifications to a device using the Pushbots dashboard as well from its Nodejs API.

Pushbots’s notification service is pretty simple to use and is one of the best solution if you are planning to send notification to all the devices at once. You can read more about pushbots here.

A quick demo of the app we are building

You can find the completed code here.

So, let us get started.

What is a Push Notification?

If you are new to push notifications, take a look at this

Setup Pushbots

Navigate to the Pushbots Signup page and create an account. You will be sent an activation mail and once you activate your account, you can login. You will be taken to your dashboard, and it should look something like

Screen Shot 2015-04-20 at 9.42.10 am

From the bottom of this page, create a new app. Let is calls it testPushApp and hit the return key. This will create a new project.

Next, we need to obtain the Apple Push Certificate and Android’s GCM API Key. You can follow the step by step guide below

After you have obtained the GMC API key and the Apple’s Push certificate, you need to head back to your app on Pushbots, Click on settings and update the same inside the Platforms’s Tab

Screen Shot 2015-04-27 at 10.36.30 am

Develop the App

Once you have the GCM sender ID and API Key or Apple’s Push Certificate, we will scaffold a new Cordova app. For this post, I will be using only Android’s GCM values.

Create a new folder named testPushApp. Now, scaffold a new Cordova project. Open a new terminal/prompt inside the testPushApp folder and run

cordova create myApp com.push.notif.app testPushApp

Note : Make sure you have Nodejs installed and then Cordova installed globally before executing the above statement. If you run into any issues refer PhoneGap 3 CLI Setup on Mac & Windows.

The above command will create a new Cordova project. To test the scaffolded app, CD into myApp folder and run

cordova platform add browser

Next, we will run the app.

cordova run

and you should the app launch in you browser and it should look like

Screen Shot 2015-04-20 at 10.37.01 am

Next, we will add Android and iOS platforms.

cordova platform add android

and

cordova platform add ios

After that we will add the pushbots Cordova plugin.

cordova plugin add com.pushbots.push

Once the plugin is installed, open www/js/index.js and update the  onDeviceReady() as shown below

Things to notice

55347ccb17795958748b457c – is the application id from your Pushbots dashboard

Screen Shot 2015-04-27 at 10.40.46 am

145091056519 – is the GCM project Number from your Google developer console

Screen Shot 2015-04-27 at 10.42.33 amThis all the setup you would need to integrate Pushbots with your Cordova App for iOS. For Android there is one more step.

After you have added Android platform to the current project and installed the pushbots plugin, a new file named pushbots.xml will be created at /platforms/android/res/values/pushbots.xml. Open that file and update it as below

You can get the values from the previous step.

That is it!!! Now, we can test the app.

Test the App

I am going to deploy this app on to my Android phone by running

cordova prepare

cordova run android

This will install the app on my device. Now if I head back to the Pushbots dashboard, and select the testPushApp you should see the number of devices updated

Screen Shot 2015-04-27 at 10.51.57 am

Now, click on Send a push link and you can enter a text and send it to all devices or only to devices you wish to target (using the segmentation button below the message box).

When the notification is sent, you can checkout the same on your device

Screenshot_2015-04-27-10-53-18

Simple and sweet!

And if you want to launch a webpage when the user clicks on the notification, it is as simple as adding a custom field named openURL and the value is the link.

Screen Shot 2015-04-27 at 11.04.34 am

And when you send this notification,

Screenshot_2015-04-27-11-04-58When the user clicks on the notification, a web page with that link would be opened.

Implementing Notifications from a Nodejs App

So far, we have used the Pushbots dashboard to send the notification. Now, we are going to send push notification programatically, thanks to the NPM module named pushbots.

Inside the testPushApp folder, create another folder named myNodeApp, which is at the same level as myApp (Cordova app). Open a terminal/prompt here and run

npm init

This will create a package.json file and should look something like

Next, we will add pushbots module to our project and save it in package.json. Run

npm install pushbots --save

Create a new file named index.js at the root of the myNodeApp folder. And add the below code.

Things to notice

Line 4, 5 : You can get the ID and secret from the Pushbots dashboard, key’s tab

Screen Shot 2015-04-27 at 11.19.55 amLine 7 : The message you would like to send. 1 as the last argument indicates an Android device and 0 an iOS device. You read more about the API API V1.

Line 8 : The custom field property, to open a URL

Line 11 : Send the push notification.

If you save the file and run

node index.js

You should see

Screen Shot 2015-04-27 at 11.17.55 am

And on your device

Screenshot_2015-04-27-11-15-37

Hope this post gave you an idea on how to implement Push Notifications. Do remember, this same logic can be ported to any Cordova app, be it Ionic or Framework7.

Another widely used push notification service is PushPlugin from the Phongap team. You can check out that too.

PS : The API keys’s and ID’s shown in the video or the code would not work for you, as I have already deleted those projects.


Thanks for reading! Do comment.
@arvindr21