Parse Push Notifications with Ionic

I have successfully integrated the Parse API for Push notifications in my App. Does ionic have built in angular wrappers for listening events such as notification Received, notification opened etc. Parse seems to have only the Android SDK which forces me to do some extra native coding.

How can I avoid this?

Why not use ngCordova? http://devgirl.org/2014/12/16/push-notifications-sample-app-with-ionic-and-ngcordova/

I also suggest keeping an eye on her blog; she has some awesome stuff in there.

Yes I agree @pcbulai, but I have already integrated the Parse API for sending push notifications, and the demo app requires GCM registration. Can you please point to a more precise demo? I would love to use ngCordova listeners in Angular JS.

Sorry, but I don’t know a more precise example. I had that one in my Pocket. I’m sure the official documentation will do the trick as well though.

GCM can be done with Parse.com - but it is much harder than with iOS - Parse just do some dumb things - like forcing you to use there GCM service.

Basically you need to use their REST api to add your devices to the installation parse class.

something like this - I add a deviceType column so we can pick out the GCM devices for our push later.

                    // Rest call to Parse to Insert/Update the Installation record for this Device
                $http({
                    url: "https://api.parse.com/1/installations",
                    method: "POST",
                    data: {"deviceType": "android",
                           "installationId": CommonService.parseInstallationId,
                           "gcmRegId": e.regid,
                           "testdevice": tester,
                           "channels": [""] },
                    headers:  {"X-Parse-Application-Id": CommonService.parse_appkey,
                               "X-Parse-REST-API-Key": CommonService.parse_restkey,
                               "Content-Type": "application/json"}
                }).success(function (data, status, headers, config) {
                    LogService.add("GCM RegID: " + e.regid);
                    LogService.add("GCM Parse InstallationID: " + CommonService.parseInstallationId);
                        //alert('GCM registered success = ' + data + ' Status ' + status); 
                }).error(function (data, status, headers, config) {
                        //alert('GCM registered failure = ' + data + ' Status ' + status); 
                });

then you need to write your our ‘Push Console’ (I have a Dashboard for my apps that is used for many things including the Pushes.

You need to add a Parse Cloud function then that you can call (mine called GCMPush) - this functions basically looks up the installation class for deviceType = GCM and then calls the google GCM API directly (using your GCM-API-KEY) to send the push - bit long winded but it has worked well for me for over a year now.

the call is something like this

			Parse.Cloud.httpRequest({
		  method: 'POST',
		  url: 'https://android.googleapis.com/gcm/send',
		  headers: {
		    'Authorization': 'key=' + GCM_API_KEY,
		    'Content-Type': 'application/json'
		  },
		  body: {
		    registration_ids: gcmRegIds,
		    data: {
		    	"message": message
		    }
		  },
		  success: function(httpResponse) {
		    // Do something
		    console.log('GCM Push Successful');
		    response.success({"msg":"gcm Push Successful","count":gcmRegIds.length});
		  },
		  error: function(httpResponse) {
		    console.error('GCM Request failed ' + JSON.stringify(httpResponse));
		    response.error({"msg":"gcm Push Failed"});
		  }

Hope this gets you to the next step

cheers

Thanks @darrenahunter for the code snippets. I am able to register and receive push notifications from Parse to my device. When the app notification is clicked, the app opens up. But, I am looking for eventlisteners that I can call to have a custom behavior.

Example: Let’s say I receive a news article in Notification in system tray, obviously it displays only news header. When I click the notification I want to view that news article. So, there has to be some event listeners in cordova or in parse that I should be able to call when user clicks notification

How are you handling notifications in your angular code?

great news

as the plugin is outside of angular you need to inject $state to be able to ‘$state.go()’ to where you like in your app.
you will need to add to your message payload if you want to pass in metadata to help route to the correct spot.

function onNotificationGCM (event) {
    angular.element(document).injector().invoke(function ($state) {
        $state.go('specific_state_like_newsfeed');
      });
}

The onNotificationGCM works with cordova pushplugin , which works with GCM. Since, I have implemented the Parse API, which takes care of GCM. (as you mentioned it has its own internal GCM like service) . I can’t implement this feature. However, I am looking for something very much similar like this, which works with Parse just like the above one works with GCM.

Update: If I try to get above code working. Then I’ll have to register to GCM and then register this GCM id with Parse as you mentioned. Then, implement the cordova push plugin.

yes I found the Parse GCM implementation terrible and inflexible.

I get the regid, store it then use my our GCM cloud code which would give you the control you need to do what you require

Yes, surprisingly even Parse guys aren’t developing any plugins for this. I am working on creating a plugin for same. That should help a lot of guys.
:wink:

Just a heads up - We’re actively working on something called ionicPush, which will give you the ability to easily send push notifications to your ionic apps. If you’re interested in trying out the early preview send an email to hi [at] ionicframework [dot] com! :slight_smile:

5 Likes

Hi Ben

That is great news. Will this be a ‘pay for use’ service. As Parse gives away 1 million pushes a month.

Happy to test it when you are ready. The Parse implementation is not very good for their JS SDK - it is like the poor cousin to the Android and iOS SDK’s.

Am I to assume you will have a REST API that we can use to register devices and send pushes with.

Thanks
Darren

Thanks a lot @Ben. I have dropped the email as you asked. I am looking forward to implement it in my app. I hope this makes the Push notifications way more simpler.

I’m eager to see the ionic implementation for push. But I needed to do something quickly so I did a mashup between these 2 posts to get push notifications working with Parse (tested with iOS only):

You need to clone the git repo; follow these instructions from Parse; and also the steps in devconfig.txt to set up the ionic project folder. Don’t forget to add your Parse keys.

for just the commit, see:

I recently made a fork of the Parsh Push plugin for my ionic app at https://github.com/campers/parse-push-plugin

I’ve added callbacks for when the user clicks on the notification, separate to when the notification is received. I haven’t updated the readme docs yet for it, if you’re familiar with the plugin then you should be able to work it out. The one I forked from is a little different from some of the others, it uses the Parse events instead of a global scoped callback.

1 Like

Hi Ben,

will ionicPush support Amazon Device Messaging and Microsoft Push Notification Service?
I would love to get early access, I sent out an email. Thank you!

I’m using the https://github.com/grrrian/phonegap-parse-plugin/ however I am with this issue https://github.com/grrrian/phonegap-parse-plugin/issues/7 which does not allow it receives pushs when the application is closed, somebody else have this problem or already solved this?

Hi @jjpatel361, can you tell me how to register/install device to parse. i’m new in ionic and i want use parse to push notification. i have add parse plugin, include in index and add Parse.initialize(‘XXXX’,‘XXXX’), but device not install in parse.
thanks

My advice, dont use parse for push notifications.

Ionic push is in alpha and will hopefully enter beta in the next couple months.

2 Likes