Apache Cordova / Phonegap Push Notification Tutorial – Part 2

receive-push-message-phonegap
receive-push-message-phonegap
receive-push-message-phonegap

Phonegap Push Notification Tutorial – Part 2 ( Setting up Apache Cordova / Phonegap Project for Receiving Push Notifications)

In this tutorial we’ll see how to setup Apache Cordova / Phonegap project for receiving push notifications.

  • Open Android SDK Manager (type android in terminal)
  • Make sure you’ve installed the required tools

sdk-manager-tools

Receiving Push Notification using Phonegap / Apache Cordova

  1. Create a New Project or use existing project
  2. Add platform such as android
  3. Add you Push Notification Plugin (https://github.com/phonegap/phonegap-plugin-push)
cordova plugin add phonegap-plugin-push --variable SENDER_ID="721393051486"

Apache Cordova / Phonegap Push Notification Example Code.

replace "senderID": "721393051486" with your own sender ID

var push = PushNotification.init({ "android": {"senderID": "721393051486"},
         "ios": {"alert": "true", "badge": "true", "sound": "true"}, "windows": {} } );

    push.on('registration', function(data) {
        // data.registrationId
    });

    push.on('notification', function(data) {
        // data.message,
        // data.title,
        // data.count,
        // data.sound,
        // data.image,
        // data.additionalData
    });

    push.on('error', function(e) {
        // e.message
    });

During Initiation

when GCM registration is success, you’ll receive GCM registration ID with has 256 char encrypted data by using data.registrationId. registrationId is an unique for all device & all application

While receiving Push Notification 

when you send Push Message from server, push.on('notification' will be called. you can receive these data such as message, title, count, sounds, image, additionalData. if some error occurred it’ll initiate push.on('error'

Apache Cordova / Phonegap Push Notification Full Example code

<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
 var push = PushNotification.init({ "android": {"senderID": "YOUR_SENDER_ID"}});
 push.on('registration', function(data) {
 console.log(data.registrationId);
 document.getElementById("gcm_id").innerHTML = data.registrationId;
 });

 push.on('notification', function(data) {
 alert(data.title+" Message: " +data.message);
 });

 push.on('error', function(e) {
 alert(e);
 });
}
</script>
</head>
<body>
<h1>Push Notification Example</h1>
Your GCM ID : <br/>
<p id="gcm_id"></p>
</body>
</html>

Compile this application and run on your device, you can see some Registration ID (256 char encrypted). i.e, your GCM ID like

APA91bFIj2WLkD3W4kbZcGO7dyI-TKKX0QpYCwtzqE2cNC0GbnUfQ7_gvQKOUloSb9T-6OZMxKdHXj8biiMYVgRJJP-C6b3PfpC7Kzu4G77PqMeGekHU9W6qTwnu0YTtWGNd6tGMBQka

Apache Cordova / Phonegap Push Notification is not working ?

  • Check whether you’ve installed Push Notification Plugin
  • Make sure, you’ve installed required tools in SDK Manager (see the above figure)
  • Check you’ve included cordova.js file with your project
  • Check your Sender ID which you’re created in GCM Projects
  • Make sure your internet connection

 

Read These,

  • Was this Helpful ?
  • Yes   No
  • Andrés Gutiérrez

    I like understand the content into js/jq.js function or a full example on its deployment.
    Thank you and congratulation.

    • Thanks for your feedback, I just updated my code

  • Gopi Nath

    Hi, Sundara Vel, I followed as it is in your tutorial, but i did not get Registration ID.

  • Gopi Nath

    Hi, Sundara Vel, I followed as it is in your tutorial, but i did not get Registration ID…

    • If you’re using Emulator, it won’t work, please check in real device

  • Mahesh Yatageri

    Hi Sir , I’m not able to GCM id please help me .

    • If you’re using Emulator, it won’t work

  • Tablet Teste

    how receive and display message with screen locked?

    • It’ll work automatically. No need to code specially.

  • Micael Icp

    Some configuration is Needed In addition to these que in this tutorial? example:

    add :

    or make any changes in XML ?

    • Yes, If you’re using phonegap build you need this configurations, if you use CLI mode no need

  • Micael Icp

    thanks for listening.

    follow your tutorial, but did not return the token. – Configuration (Phonegap 5.3.8) and (5.4.1 Cordova)

    – CLI Phonegap

    – I set the SenderID my GSM project.

    – Application running on the device

    no longer know what to do, I tried all possibilities, help me?

    Michael – BRAZIL

    • – Make Sure your Internet Connection
      – did you included “cordova.js” with you code ?
      What error you’re getting (try with debugging option)?

  • Natesha1

    i am tried this but fully confused please help me …

  • Natesha1

    How to get Registration ID ?
    Please tell me

    • When you run this on your mobile, you’ll get registrationID

  • Shyam Tomar

    Hi Sundaravel, It is really appreciable that you added awesome blog for PhoneGap Push notification. I am able to receive Device Registration Id but along with Id I get one more text “dAp7sfhAwLE”: ; so I believe I need to remove this text before device id. Can you reply to this?

    • data.registrationId It’ll return only registerationID. you don’t need to remove anything

      • Shyam Tomar

        Hi Sundara, See attached image. If you see highlighted text which looks unwanted. Since actual Id is started with APAXXXXXXXXXXXXXXXXXXXXXX.

        • Do you receive push notification, after removing this ? . If yes you can remove, otherwise you should not remove

        • You Should not remove this

  • Fatma Ahmed

    i’m beginner in android so i want to know
    what is the relation between SDK services and project created by phone gap
    and how can communicate between them

    • SDK -> Software Development Kit
      1) All OS has different SDK for building applications like Android SDK, iOS SDK or Windows SDK.
      2) Phonegap creates webview & runs our apps in web view

      • Fatma Ahmed

        how can merge phone gap project with android sdk

        • Phonegap uses android SDK

          • Fatma Ahmed

            when I test apk file on real device can not receive any thing
            can you help me and tell me what is the problem

  • Rony Cohen

    How to redirect to a $state on Notification click ?
    (node-gcm phonegap-plugin-push)

  • mohamed riyas

    hi sundaravel
    im begginer in phonegap i want know popup message in phonegap and i want to message recived notification pls help

    • Just follow these steps, you’ll get the output

  • Xiaofan Wu

    Thank you so much for creating this!! 😀 This might be a very simple question, but I was wondering where would I put this code if I am writing an ionic app? Thank you so much

    var push = PushNotification.init({ “android”: {“senderID”: “721393051486”},

    “ios”: {“alert”: “true”, “badge”: “true”, “sound”: “true”}, “windows”: {} } );

    push.on(‘registration’, function(data) {

    // data.registrationId

    });

    push.on(‘notification’, function(data) {

    // data.message,

    // data.title,

    // data.count,

    // data.sound,

    // data.image,

    // data.additionalData

    });

    push.on(‘error’, function(e) {

    // e.message

    });

  • yash vaghela

    Registration ID is not displaying…please tell me how to fix it??

  • yash vaghela

    Registration Id is not displaying..How to Fix it…

    • Make sure you’ve installed plugin

      • yash vaghela

        yess i installed all plugins..
        please tell me how to get GCM ID.

        • yash vaghela

          i am using intel xdk..and put this code in index.html

      • yash vaghela

        i am using INTEL XDK..and put this code in index.html

  • yash vaghela

    ??????

  • Pradeep Nalla

    Hi Sundaravel,

    I have followed the steps from part-1 and part-2.
    but when I run my app on android device, GCM ID is not getting generated.
    Please help me.

    • Please add Push Plugin for your project

      • Pradeep Nalla

        Hi Sundaravel,

        I used following command to install the plugin to project.
        Please let me know if I had to do some thing more.

        cordova plugin add phonegap-plugin-push –variable SENDER_ID=”XXXXXXX”

  • Shyam

    Dear Sir,

    I have followed you instruction but it is showing the following error in console.
    GET http://localhost:8100/js/jquery.js

    Can you please solve my problem? Thank you.

    Regards
    Shyam

    • You need to download & include jquery file

      • Shyam

        Dear Sir,

        Can you please send me the URL to download? Thank you.

        Regards
        Shyam

  • karthick kannan

    Hi sundaravel,
    i followed part 1 and part 2 . after finished part 2 i did’t get any notification what i did wrong please tell me..

  • Nickson Nyakambi

    Sundara….could you give suggestions on how to populate the gcm id to a html form field for subsmission to a web server?

    • @nicksonnyakambi:disqus You can store your GSM token in localStorage & when user clicks signup or login, you can send

  • Muhammet Sancaktutan

    when i build 🙁 help me plsssss
    C:UsersMSANCAKTUANAppDataLocalAndroidsdktoolsantbuild.xml:573: Failed to resolve library path: C:UsersMSANCAKTUANAppDataLocalAndroidsdkcom.android.support:support-v13:23+

    • build with gradle

      • Muhammet Sancaktutan

        thanks for reply
        how can i do build with grandle in eclipse? have you got video links for this ?

        • I recommended you to setup CLI (building through command prompt) mode.

          • Muhammet Sancaktutan

            thanks a lot 🙂

  • Ernesto

    hi,

    I can receive GCM ID if I test app via:
    – build app + install apk

    but I cant get GCM ID with
    – “phonegap serve”

    it’s possible this example works with “phonegap serve” ?

    Regards,
    Ernesto

    • Hey @disqus_y89pLtk8mg:disqus, Push Notification only works on real device

      • Ernesto

        Ok,
        I test it on real device but I do it with

        http://app.phonegap.com/

        but it doesn´t works.

        It only works if I build app and install it.
        And this is a very slow option while I’m developing.

        Regards,
        Ernesto.

        • Yes @disqus_y89pLtk8mg:disqus, you need to build it. If you feel slow development process. you can setup CLI mode

          • Ernesto

            Im confussed,
            What’s “cli mode” ?
            it is use command line to build apk ?
            This is the way I build app, but I think its very slow.

            There is no way to test app with push notificatión with “http://app.phonegap.com/” ?

            Regards

            Ernesto.

          • command line prompt

  • Jp

    Is it possible send notification to IOS Device with same GCM Project sender id?

  • saranya

    Hi Sir,

    When I build ,I got this error…

    Execution failed for task ‘:mergeDebugResources’

    (Help me Plz)

    • Try to remove & add platform again

      • saranya

        Hi ,,
        I followed all steps from part 1&2…
        but when I run the app on my mobile , GCM Id is not generated.
        (plz help me)

        • Please make sure, you’ve connected to network & you’ve added google account with your mobile & project ID & server key should be from same project

          • saranya

            Where i want to add server key in that project

          • In your serverside code (php)

          • saranya

            stil I’m not working serverside…only i done part 1&2 in your tutorial, but gcm id is not generated…

          • saranya

            Thank You….I got GCM Id…

      • Christine White

        Hi, I am having the same issue.

        • Remove & add platform

          Please make sure, you’ve connected to network & you’ve added google account with your mobile & project ID & server key should be from same project

          • Christine White

            Hi. I have tried ‘cordova run android’ without adding the actual code, meaning the only thing I have done so far is to install the plugin.And I still get the same error. What is the next step?

          • Push notification only works on mobile (real device)

          • Christine White

            Hi! I was able to retrieve the GCM ID, now I want to make sure that I put the correct GCM ID to the php file that you created. Can you advice me how can I copy the GCM ID from phone to my computer? Thanks.

          • as of now, you can share it from gmail or whatsapp,

            but you need write a web services & send them

          • Christine White

            Hi Sundara, I think I have the Project ID and the server key, what I don’t remember adding is ‘mobile’. How do I add that? Thank you.

          • Christine White

            Hey, I tried to remove the android platform and add it again, the error is now gone. Now my new problem is it does not generate a GCM ID, what could be the reason? How to resolve this? Thank you.

          • Try it on real device

  • saranya

    Thank You…Nice Tutorial….I got GCM Id…….

  • John Wandy

    Hi, Sundaravel, thanks a lot for your tutorial

    I just tried it without having the android tools installed on my system, but I have use the phonegap web page build to create the API, I am not getting the GCM ID on my android device, could the reason behind this problem be that I don’t have the android tool installed? I am running it on Android 6.

    PS. I am a beginner, in phonegap, I just compiled the www folder into zip and uploaded it to build site

    • Hey!! If you’re using phonegap build, you need to add plugin with config.xml

  • foufou H

    I have a SOAP service web. I add the function in my server and i create a form with input text message and title. I create a javascript call the function but doesn’t work.

    push.on(‘notification’) not fire notification.

    • Are you getting success result from your SOAP ?

      • Mufaddal Nala

        Hello @sundara_vel:disqus

        I have followed all the steps. I got registration ID.
        I also followed step 3 with CURL same as @foufouh:disqus mentioned push.on(‘notification’) not fire notification.

        CURL Json
        {“multicast_id”:8514531628743546601,”success”:1,”failure”:0,”canonical_ids”:0,”results”:[{“message_id”:”0:1466329435613615%d3b3538ef9fd7ecd”}]}

        Can you please help me…

        • Mufaddal Nala

          Hello @sundara_vel:disqus

          I just refreshed the key and it working like charm.

          Thank you very much for sharing your knowledge with us… This article is very helpful.

          • Thanks for your feedback

          • Mufaddal Nala

            @sundara_vel:disqus Pleasure sir,

            Is this same plugin will also work for IOS ? or i need to integrate any other plugin?
            Do you have any idea ?

          • No, It works in android only

          • For iOS push notification, you need to use APNS (Apple Push Notification Service)

          • Mufaddal Nala

            Okay.. Got that.. Thanks for the help and support brother. 🙂

          • Mufaddal Nala

            @sundara_vel:disqus One last thing. The notifications comes with vibration but no sound… How can I trigger default sound that is use for messages ?

          • Mufaddal Nala

            Hello. I solved the sound error. Just put sound = ‘default’

  • divya

    I am not getting GCM ID… plugins added.. cordova.js and jquery min version added. Sender Id added.

    device ready function is not firing in my code…

    • Just copy that code & execute

      Note: It won’t work on emulator, you need a real device for testing

      • divya

        Hi ….
        I followed same code & excute..
        but when I run the app on my mobile, its not working…device ready function is not firing in my code..

        • include cordova.js ?

          • divya

            In my project — Cordova reference, this is added to your app when it’s built. —

  • JJ Abrams

    hi Sundaravel: i have a Question:

    how difficult is create the same example into iOS?.
    i have read about that and i think i need to create a certificate and more things in APNS. is not transparent the process?

    • You can refer some sites for doing for iOS, It has long steps

  • Sandeep Marwal

    Its working fine for me , Thanks
    But the app icon is not showing with notification.
    can you please help me ?

    • If you use proper icons in your config.xml it’ll work

      • Sandeep Marwal

        Thanks. its working now .

        One more question: Not getting the sound with push notification and also can add the app internal page as link to notification ?

        • Check you volume or you can also send sounds

  • Yusuf Adeyemo

    Hello Sudaravel Can i have your mail please?

  • Guna Sekaran

    Wow finally i found Thanks Man

    • Thanks for your feedback

      • vasagan nadar

        hi ,

        i got gcm id in my mobile but i didn’t get push notification, can u tell me ?

        • It may take time.
          Not working yet?
          create another google project & try from first.

  • Normah Malik

    i’ve followed all the steps but i cant find any cordova.js file here.

  • Gkcn

    Hi, I’ve got this error: Push Notification has no method ‘init’.
    In PushNotification.js file, there is no init either, any comment?

  • sathish

    pls anyone help how to create push notification

    • Read that article from step 1 to step 3

      • sathish

        step 2 i cant understd can u pls help me

        • What you’re not understanding ?

          • sathish

            in 2nd tutorial wat s tat sdk manager

          • That’s android SDK Manager

  • Deepak Yadav

    Hi Sundara Vel,
    I followed every step carefully and implemented in Phonegap (v0.2.3). I am ot able to get the Registration ID (256 char encrypted). i.e, GCM ID on my device. Please help me with the issue!

  • vasagan nadar

    hello Sundara Vel,

    I get the gcm id and it displays the same. but i didn’t get the push notification.

  • Bijal

    Hello, I applied all steps which you given for Android but it is only work for some android mobile like Samsung Note 3, It’s not working for others. Please do needful

    Thanks,
    Bijal Soni

    • Please Check the device compatibility

      • Bijal

        how do i check device compatibility?

        • Chinna

          Check your configurations in config.xml

          • Bijal

            hello, now its working in android but not working in ios

          • It won’t work on iOS, This article for only suits for android

          • Bijal

            Do you have any idea about ios?

          • You need to use Apple Push Notification services, you can find that by Googling 🙂

  • Danilo Coragi

    If you are using Jquery Mobile, the pagecreate event sometimes (almost all the time) happens BEFORE deviceready function. So, you get a PushNotification is not defined. You have to make sure that deviceready had already happened to use Push. I’ve found this in Stackoverflow that helped me to it: http://stackoverflow.com/questions/22515465/jquery-mobile-function-runing-before-the-device-ready

  • Bhargav

    I am using phonegap build to l apk .
    While testing in phonegap application it works fine but after building it online it doesn’t work. Please help me out

  • serdar_d

    This is the best tutorial about this topic. thank you very much!

    I appriciate your effort

  • anusha

    will this work for cordova 5.1 version, ????
    i m unable to get the gcm id

  • Saksham Madan

    while building the app by build.phonegap, it is showing that – plugin unsupported: com.adobe.plugins.pushplugin : Help Please

    • Plugin name is phonegap-plugin-push

      • Saksham Madan

        but build.phonegap is not compiling it

      • Saksham Madan

        I want to send push notification to all users. Can you guide me?

  • ali

    after install last version
    Cordova plugin add phonegap-plugin-push@~1.8.0

    i get same error in build

    BUILD FAILED

    Total time: 3.916 secs
    ERROR building one of the platforms: Error code 1 for command: cmd with args: /s
    ,/c,”C:MyAndroidPayment_Newplatformsandroidgradlew cdvBuildDebug -b C:MyAn
    droidPayment_Newplatformsandroidbuild.gradle -Dorg.gradle.daemon=true -Pandr
    oid.useDeprecatedNdk=true”
    You may not have the required environment or OS to build this project

  • Kannan Sathasivam

    Thanks for this is the best tutorial…I have small doubt how to change push notification image(instead of default image) my own image..

    • You need to add app Icon

      • Kannan Sathasivam

        from where..???

        i hav tried this—>

        push.on(‘notification’, function(data) {
        console.log(data.message);
        console.log(data.title+” Message: ” +data.message);

        data.title: “pushTest”,
        data.sound: “file://sounds/reminder.mp3”
        });
        push.on(‘error’, function(e) {
        console.log(e.message);
        });

        but i am getting error…

        • your code is wrong.. “data” should come from website

          • Kannan Sathasivam

            ya got it…now its working…thanks sudaravel

  • M. Syamsul Arifin

    this is best and simple tutorial about push notification I ever know 🙂
    but I have a problem, when I build that script there’s error, build failed!
    “… could not find any version that matches com.google.android.gms:play-services-gcm:9.0.2+ …”
    what’s wrong…? can you help me please…
    thanks before

    • M. Syamsul Arifin

      Sorry, that problem solved, because I didn’t install Google play service etc at SDK. but I have new problem, after running apk, I didn’t received GCM ID….

      • Try from first or check in console for errors

      • M. Syamsul Arifin

        hehehe…. solved, because I didn’t include jquery.js at www folder
        your tutorial is simple and the best..

  • veeravel

    sorry, i could not understand in www folder how i use php files

    • You need to run your php file separately (on your web server )

  • veeravel

    can u tell me the directory streecture

  • Deepak Yadav

    Hi,
    I am using phonegap application. I am not able to generate the GCM ID. Please help…

  • Mr. Dev-Entrepreneur

    Please I don’t know if it’s just my doubts or something else , I implemeted this and it works fine for my android I am just not sure if there is other configurations to handle this on ios and windows phone devices. I used pushsharp on the backend and pushsharp as its own methods to send push to different platforms so far my android works perfect. I read somewhere it says there is a way to send to ios device using gcm ( means I can re-use the same android method from pushsharp but gcm will the push down to my ios devices too) any thoughts…?

  • Rajeswar Mohanty

    invalid sender id received in alert mesg

    • Rajeswar Mohanty

      got it …

      • Rajesh Vishnani

        How did you fix the problem?

  • sukhdev singh

    Very helfull tutorial

  • Sheshant Sinha

    when i test this. It fire Error “MISSING_INSTANCEID_SERVICE”.
    how i resolve it?

    • Please Try from beginning !

    • Mahfuzul Haque

      you need to have google play + other services installed in your phone to test on real device. and for emulator you must installed appropriate SDK API to communicate with google message server.

  • Dean Mokhtar

    How would I change this to make it so instead of bringing a push notification it opens my app automatically, depending on the content of the message (if the content of the message is the same as a pre-set password in the app, for example)

    • 1) Opening app automatically is not possible ( user needs to do manual action)
      2) Redirection is possible, you can use javascript redirection

      • Dean Mokhtar

        What if it does something like sets an alarm for that same date and time and when the alarm goes off it opens the app on the page I want it to? So, recording a push notification leading to an alarm automatically? Surely that can be done? I’m just new so I don’t know how and I’ve been trying for days…

        • you can use local-notification for that

          • Dean Mokhtar

            Wouldn’t that just bring a notification as normal? Not a full page alarm feature?

          • You can play some sounds (custom)

  • Peeyush

    hai m Run The PHP Script ..That Time m get Unauthorized Error..

    • Try from step 1
      Add IP address of 0.0.0.0/0 in api console

  • Mavrik Teo

    When I tried to run cordova push plugin I had a JSON error .
    | Error : Unexpected String in JSON at position 179 |

    How can I fix this problem? https://uploads.disquscdn.com/images/c81eb9212c3a14bf727129f0fa40ce981b81cabecd1d02c3d4f5e5b24377964d.png

  • Kavin Kumar

    While sending push notification to mobile im receving the following error..
    Error: Received error code 401 from GCM Service