Push Notification using Parse JS SDK and Phonegap

In Parse documentation it says push notification can only be sent using the native sdk’s or cloud code, well, for people using Phonegap, and using the parse javascript sdk that just wont do.

So avivais made a plugin to do just that, you can find it here in github.

It’s really simple to use, you install the plugin, you can find out more about adding plugins in phonegap here, and what the plugin does is it gives you the installation id, basically all you need to start working with push notifications in parse.

First, you initialize the plugin:

 window.parsePlugin.initialize(PARSE_APP_KEY, PARSE_REST_KEY, function() {
        console.log('success');           
    }, function(e) {        
        console.log("Error: " + e.code + " : " + e.message);
    });    

After that, you get the installation ID (in my case I’m saving the id in a var called installationID as you can see:

 window.parsePlugin.getInstallationId(function(id) {
        installationID = id;        
                    
    }, function(e) {
        console.log("Error Getting ID: " + e.code + " : " + e.message);
    });

Now that we have the installation id, you can subscribe to channels, unsubscribe to channels or get the subscriptions of your user using the plugin, it’s all in the Readme file of the plugin.

The plugin uses Parse’s Rest API, but after you have all that, you can just use Parse Javascript SDK to send push notifications like this:

  
Parse.Push.send({
   channels : ["yourChannel" ],
                                         
   data: {
            alert: msgToSend,                            
         }
  }, {
  success: function() {
       console.log("Success PUSH SENT: " + response);   
   },
      error: function(error) {
        console.log("Error: " + error.message);    
     }
 });

Notes:
1. I’ve only used this plugin in Android, it has the ios feature, but havent tested it yet.

2. There is a bug in the android parse sdk, in which to use the Advanced Targetting push notifications, you will need to create your own android activity to receive the push notication, so unless you want to modify the plugin to do that, you should use only channels.

3. A little tip to use only channels, even if you want to target just one user, when you sign up a new user, subscribe him in his own channel, but do not forget, very important, channel names always need to start with a letter, never a number or another character, so what I did was to subscribe appending “user_” to the front of the username:

  
parsePlugin.subscribe("user_" + username, function() {    
        console.log("Sucess Subscribing: " + username);
     }, function(e) {
       console.log("Error Subscribing: " + e.code + " : " + e.message);
  });

So for example a user that signs up with “12345” username will be subscribe to the “user_12345” channel, and since my usernames are always unique, the push notification will be sent to just that user.

Examples of queries and how to use the Javascript SDK to send pushes to certain channels, you can find it in the Parse Docs, it’s well explained there.

That’s it, it is that simple, so start sending push notification in your phonegap apps, if you have any trouble or need any help, just leave a comment here.

Happy coding

19 thoughts on “Push Notification using Parse JS SDK and Phonegap

  1. Thanks for the info! I was able to easily get push notifications on my device with this plugin, but do you know how to get the message from the push notification in the app. For example: if I send the notification that says “Hello”, it will show up in the notification drawer and it will say “Hello”, but when I open it, the app does nothing. I would like to show a popup alert with the message “Hello” when the app is opened via the notification.

    • I dont think you can do that with phonegap, for android the only way I see how to do that, is setting your custom “receiver” activity to receive the push and do what you want, this plugin is using Parse’s receiver, com.parse.ParseBroadcastReceiver has you can see in the AndroidManifest, you will just have to make your own and change the manifest, you can find out more here. Good luck 🙂

  2. hi dude i have tried to setup your app but dont seem to get it work..i created a new phonegap project..added your plugin..then in my index.html i wrote this-

    window.parsePlugin.initialize(“EFEXuki——-my pp id,”T87V6i0JH–my key”, function() {
    alert(‘success’);
    }, function(e) {
    alert(“Error: ” + e.code + ” : ” + e.message);
    });

    but nothing happens no error no success can you please help me out..

  3. hi dude i have tried to setup your app but dont seem to get it work..i created a new phonegap project..added your plugin..then in my index.html i wrote this-

    app.initialize();

    window.parsePlugin.initialize(“PARSE_APP_KEY”,”PARSE_REST_KEY”, function() {
    alert(‘success’);
    }, function(e) {
    alert(“Error: ” + e.code + ” : ” + e.message);
    });

    but nothing happens no error no success can you please help me out..

    • Hi, first of all, you should only initialize phonegap and its plugins after you have this:

       
       document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
               //your code here
      }
      

      if it doesnt work after the deviceReady, check your log, an error should be there
      And also, confirm you have the plugin correctly installed, in the command line, write “phonegap plugin list” it will list the plugins you have set up

      • where you have written //your code here
        should i write my code inside script tag there?
        sorry not a javascript expert.
        i created a git repo-https://github.com/mshukla19/Parse-Phonegap-Plugin

  4. okay so i did put it in the ondeviceready function in index.js…then it showed me success..but when i looked into parse data browser it didnt show an installation

    • sorry to bug you around i also added the getinstallationid function…and then added an alert for the id..now the device shows me an id but still when i look at parse data browser i see nothing..is there something i am missing :O

      • Hi, glad to see it’s working, you now have the installationID but you have to create the installation in Parse, in my case I’m doing it in cloud code, along with my user sign up function, but you can do it in app also.
        just do:

         
         var installationObj = Parse.Object.extend("_Installation");
            var installation = new installationObj();
         installation.set("deviceType", "android");
        installation.set("installationId", installationId);
         //save installation
            installation.save(null, {
                success : function(installation) {
                    callback(true, installation);
                },
                error : function(installation, error) {
                    callback(false, error);
                }
            });
        

        This is for android, I’m not working with ios, but for that, you won’t need the installationId, but a deviceToken, cant help you there, cause I havent used it yet
        Good luck

    • exactly, js sdk wont work, but like I said, Im using cloud code, there you can create and edit your installation object without a problem

      great to hear you have it working now, good luck 🙂

  5. Hi, Can I use this plugin ONLY to get the installation ID ? I have set the push notification with other way and I don’t want to redo all my work, but in the other hand I need to get the installation id. So is that allowed ?

    Thanks

  6. To use this plugin, do I need to register the device using Push plugin or just getting installation is enough for Parse to push notifications.

    • yes, you need to install the plugin like any other plugin, in your app/plugins folder, it should have the org.apache.cordova.core.parseplugin folder in order to use it, good luck 🙂

  7. great plugin. thanks Ricardo.
    Can you please integrate it with Phonegap Build? It will be easy for developers to find and also for build from cloud. For my new project I wanted to build from cloud.

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 )

Connecting to %s