Ionic Push notification: in search of an examplar


#1

I have tried several of the Push notification examples on offer in and outside of Ionic without success. Having gone the full circle I am back at Ionic’s door. I would like a build a simple test case app just to get the basics right before I incorporate it into something else. While I can go the iOS route I prefer to start with Android. My Ionic setup is up and working and I have built Ionic apps (without Push) successfully. Here is the question:

Can someone please suggest a statring point or Push notification example that is (1) basic enough to understand (2) complete and tested to have a reasonable chance of working (30 supported enough to be able to turn somewhere for help?


#2

For the PushPlugin you should use this:
ionic plugin add https://github.com/Telerik-Verified-Plugins/PushNotification

For the Ionic-Side i have used https://github.com/hollyschinsky/PushNotificationSample as example

//////Example RegisterDevice-Function from my Service in Ionic
registerDevice: function(){ 
            return $q(function(resolve,reject){
                var data = {};
                var destroyListener = $rootScope.$on('$cordovaPush:notificationReceived', function (event, notification) {
                    if (ionic.Platform.isAndroid()) {
                        if (notification.event == "registered") {
                            data.deviceToken = notification.regid;
                            data.deviceType  = 'android';
                            data.deviceUUID = $cordovaDevice.getUUID();
                            destroyListener();
                            return resolve(data);
                        }
                    }
                });
                var config = null;
                if (ionic.Platform.isAndroid()) {
                    config = {
                        "senderID": "000000000" // REPLACE THIS WITH YOURS FROM GCM CONSOLE - also in the project URL like: https://console.developers.google.com/project/434205989073
                    };
                }
                else if (ionic.Platform.isIOS()) {
                    config = {
                        "badge": "true",
                        "sound": "true",
                        "alert": "true"
                    }
                } else { 
                     destroyListener();
                     return reject("unknown devicetype for now");
                }

                if (ionic.Platform.isAndroid() || ionic.Platform.isIOS()) {
                    $cordovaPush.register(config).then(function (result) {
                        if (ionic.Platform.isIOS()) {
                            data.deviceUUID = $cordovaDevice.getUUID();
                            data.deviceToken = result; //IOS-DeviceToken, not tested
                            data.deviceType  = 'ios';
                            destroyListener();
                            return resolve(data);
                        }
                    }, function (err) {
                        destroyListener();
                        return reject(err);
                    });
                }
            });
        }

        ////////Example UpdateDeviceToken-Function from my Service in Ionic. Run it after the device is ready and the user is logged in, for example
        updateDeviceToken: function(){
            //console.log('update device token');
            return $q(function(resolve,reject){
                 service.registerDevice().then(function(data){
                    var dataToSend = {
                            deviceToken: data.deviceToken,
                            deviceType: data.deviceType,
                            deviceUUID: data.deviceUUID
                        };
                        //Save the data on the Server, maybe replace old DeviceToken with this new one
                        //this http-request has an Authentication-Token to identify which user send this and i save this device-data to the user-devices-array
                        $http.post(Constants.API.HOST_URL + '/account/updatedevicetoken',dataToSend ).success(function(result){
                            return resolve(result);
                        }).error(function(err){
                            return reject(err);
                        })
                },function(reason){
                    return reject(reason);
                });
            });
        },

This is still in development and ugly but works so far :wink:

For the PushServer i have used https://github.com/Smile-SA/node-pushserver as example and rebuild it for my own needs -> Database with Userdata and its devices, gcmPusher to send the android-messages, API for all the needed stuff like user-registration, login, logoff, updatedevicetokens, send messages etc…


#3

Bastian

Thank you for taking time to reply. I am currently looking at Holly’s ionic sample app. Having tried an earlier version of her PG solution and failing am I apprehensive. This is not because of error Holly has made but because the tutorial aspect makes assumptions about the profiency of the end-user that is just not valid in my case. Unless it goes “inject code here” I am at a loss as to where and how the code should be injected.

I am howvever ever hopeful that this time around I just might get it to work.

Chris


#4

Bastian

I tried Holly’s PushSample for a second time taking great care to be accurate. It failed again at the same point Notify.js comes up with error:InvalidRegistration. I am however 100% sure the tow registrations match. A Google search quickly shows that I am not alone with this problem.

I would like to try the Telerik plugin but their Git-download is a bit sparse on step-by-step details. In fact there seems to be quite a lot of Telerk prerequisites a little indication of what needs to be included in config.xml. I am once again sure all is clear for those with well developed JS skills.

My feeling though is that if we do not make mobile accessible and understandable for a wider and newer audience (like myself) we are not going to make mobile relevant to the business market ay large.

kind regards

Chris


#5

Hi Chris,
which Server do you use as backend for your PushNotifications?
The Error invalidRegistration sounds like wrong api-key for gcm or wrong "senderID"
Or check, if the “notification.regid” looks ok, see my $cordovaPush.register()… registerDevice-example above
Like: AxxxxxxHIpzxxxxxxxxxxH99yhchkiqxxxxxxxHlQc-G-YCpxxxxxmFe-XwNkDIBk4xxxxxxxVtdCISdQEcXUQxtbxxxxxxxxazeNrkpUI
(x’s by me :wink: )
Ionic:

...
if (ionic.Platform.isAndroid()) {
    config = {
       "senderID": "434205989073" // REPLACE THIS WITH YOURS FROM GCM CONSOLE...
    };
}
...

Node-PushServer:

...
"mongodbUrl": "mongodb://username:password@localhost/database",

"gcm": {
    "apiKey": "YOUR_API_KEY_HERE"
},
...

And for the PushPlugin i have no specials in my config.xml
Only for the whitelist-plugin

...
<content src="index.html"/>
<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
<preference name="webviewbounce" value="false"/>
...

maybe just do that:

ionic plugin remove com.phonegap.plugins.PushPlugin
ionic plugin add https://github.com/Telerik-Verified-Plugins/PushNotification

You dont need the Telerik-Backend-Service, if you install your own server. And i dont have tried the Ionic-Solution yet.


#6

If you are still looking for a working example, take a look at my guide: Ionic Push Notifications With Ionic.io In 15 Minutes

This shows how to use the Ionic.io service to deliver eas push notifications without the trouble of having to install local push plugins which end up not working correctly…


#7

THank you for taking time out to reply. I will investigate. regards Chris