Pushbots and Cordova – Easy Push Notifications for your app

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

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

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Musah Idriss Kofi

    Hi

    My name is Musah and i have a pushbots account called – RISING AFRICA

    I’m trying to send push notification that will open directly to the post when clicked.

    I tried the openURL custom field but that opens with a browser

    Also i did articleid, article_id and post_id but all didn’t work.

    I have seen all your videos but i’m still stuck.

    How do i fix it

    A notification that when clicked opens the article directly.

    Thank you

    Musah

  • Vinicius KBÇA

    it is possible to perform the direct command in the application (JS code), or only via the command line as in the example. Sorry for the english I’m from Brazil, thank you!

  • Niklas

    Hello
    I have done exakly what it says on the tutorials.
    I have retype the code and api many times..

    But no device is register…

    Please, what can i do !!!!

  • f1lander

    I have a problem with this plugin, i get this error when a I trying to build android in ionic project ERROR building one of the platforms: Error: /Users/desarrollo/checkApp_beta/platforms/android/cordova/build: Command failed with exit code 1

    You may not have the required environment or OS to build this project

    I have all sdk android installed, i founded an error like this, it’s about android.platform v4 related with push plugin facebook, I need your help because I need implement push notifications.

  • tridox

    Hello Arvind, Thanks for your good tutorial. I am new to phonegap . My first mobile that i am trying out is push notification. I searched your article in google and started developing pushnotification app using phonegap. I tried all the steps provided by in this article but still i am unable to see my device in pushbots dashboard. Kindly assist. I need my first app to be successful so that i can proceed further.

  • Mufaddal

    thanks for the wonderful article, i was successfully able to build and publish the app to google play, until i changed the “cordova create myApp com.push.notif.app testPushApp” while creating app to “cordova create myApp com.mpw.apps.ljapp testPushApp”.

    the build and run works fine, but when i sign and upload to Google Play it gives following message

    Your APK needs to have the package name com.push.notif.app.

    • Mufaddal

      ok, i figured out the issue, i was trying to upload the apk with different package name on the play store where i had uploaded the com.push.notif.app

      so creating a new application worked fine.

  • Fabian Davidson

    PushbotsPlugin.initializeAndroid doesn’t seem to be registreing my device, I am able to get back a token using PushbotsPlugin.getToken , but I don’t see the device registered on https://pushbots.com/dashboard . I have push notifications set up for 1 application so far , I’m not sure why this one is not working. Any ideas?

    • Munib mir

      Any solution for this issue, we facing the same issue

  • Srikanth Hugar

    I am using cordova: 5.1.1, ionic:1.0.1 & pushbots:1.2.x.

    My pushbots works fine in android, but ios it fails. I hvae done all the configuration and alert is displayed in ios device related to user permission for push notifications. But when i go and check in the pushbots dashboard, device is not registered. What could be the issue here?

    I am trying to register the device with code.

    if (PushbotsPlugin.isiOS()) {
    PushbotsPlugin.initializeiOS(‘XXXXX_MY_APP_ID_XXXXX’);
    }

    When i check the logs from xcode

    [Pushbots] You’ve to call :sharedInstanceWithAppId first.
    [Pushbots] :sharedInstanceWithAppId XXXXXXXMY_APPA_ID_XXXXXX.

  • Fabricio Guedes

    Everything done just right , OS sends push But do not receive … in the test environment … paragraph IOS need to have an account paid Developer How ?

  • Lohith

    Hi,

    Thanks for the great post.

    I have done this and its working fine. I am able to send notification through pushbots.com now.

    I would like to send push notification from my android device using cordova app

    I have a simple app containing text box and submit button. I need to send the message as push notification whenever i submit the button to all those whoever using my app. How can i achieve this.

    i have done upto this much.
    1) cordova create hello com.hello.test pushtest
    2) cd hello
    3) cordova platform add android
    4) cordova build android
    5) cordova plugin add C:UserslokiDocumentsPushPlugin-masterPushPlugin-master

    plugin added successfully…

    I don know how to proceed further. Could you please help me out in sending push notification on click of the submit button. ?

    Could you please help me that how i can proceed further.

    Eagerly waiting for your reply,

    thanks

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Why do you want to send a Push notification from a mobile? Any specific use case?

      • Lohith

        Hi Aravind,

        yes i am trying to do a demo project so if it works means i will be able to show it to colleague that instead of using Android application we can go for cordova apps which is very helpful.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          You mean Native Android (Java) vs. Cordova?

          • Lohith

            yes… i just wanted to show Cordova is simple as people like me who know only html, css and basic copy cat java script person can learn this. so i have created a text box with submit button so when i click on it, it should send notification to all of my app users..

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            You can try a socket based approach, where you can run a socket server & send a message from your mobile phone to the socket.

            If you are not familiar with approach, checkout Firebase.

  • Carlos Cuamatzin

    I already have my iphone registered in pushbot dashboard, i sent a push notification but my device is not receiving it. What i can be doing wrong?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Can you see your iPhone, I mean, is there only one iPhone on the dashboard? Also, did you update the Pushbots dashboard with certificate?

  • Arvind Bhardwaj

    That was really quick and awesome. Can you please share an article of push notifications without using third partyu services.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Arvind! What do you mean by without using third party services? You want to host your own Push notification server?

      • Gurpreet Hanjra

        3rd party services like http://apigee.com/ and so on. Some of them are paid. Which provide API services for push notifications.

  • fredy

    Thanks a lot for share with us your work, I’m a fan of your articles!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks fredy! Glad I could be of help.

  • Francisco Merino

    THANK YOU VERY MUCH Arvind! We are lucky to have
    people like you on this planet! :) I´m going to follow your steps now, so I will
    tell you later if I found any difficulty during the process. By the way, does it
    differ a lot if I use a different push notifications provider like OneSignal
    (this is all FREE!), Parse, etc.? THANKS!!!!

  • Jonathan Obino

    Awesome! Are you planning to do some tutorial on react/ react-native?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks! I don’t know. May be in a few days.