$cordovaPush Push notifications with badge $cordovaBadge

Hey folks!

Ok, so this seems to be a hot topic on the forums, and the other posts have helped me greatly (special thanks to Holly Schinsky for her blog post here: http://devgirl.org/2014/12/16/push-notifications-sample-app-with-ionic-and-ngcordova/). However, I still have several issues and would love some direction…

Right now I am using ngCordovaPush to handle notifications (through the $cordovaPush:notificationReceivedEvent)). So far I have been able to successfully register my device and display alerts if the app is running. But, what I want to know is:

  • How do I update the badge number? Or really, how to I get an icon to show in the status bar on android? I’ve tried using $cordovaBadge, but that doesn’t seem to work. As well, there doesn’t seem to be any options for setting the text of the update in the status bar, or the icon for that matter. Is $cordovaBadge not the right plugin for that?
  • My alert only seems to show if the app is open and running. If it’s running in the background I get no notification at all. Again, all I really want to do is have a sound play and an icon appear in the status bar with details of the notification (ie: Max commented on your post"

Here is what my push service currently looks like (it gets called after the user registers, signs in, or re-opens the app from cold start):


.factory('$noblyPush', ['$rootScope', '$log', '$cordovaDevice', '$cordovaDialogs', '$cordovaPush', '$cordovaBadge', '$noblyData', '$ionicPlatform', '$noblyAlert', '$noblyHttp',
    function($rootScope, $log, $cordovaDevice, $cordovaDialogs, $cordovaPush, $cordovaBadge, $noblyData, $ionicPlatform, $noblyAlert, $noblyHttp) {        
         return function(cb) {                     
            var iosConfig = {
                badge: 'true',
                sound: 'true',
                alert: 'true'
              },
              androidConfig = {
                senderID: 'hidden :) '
              },
              pushConfig,
              device,
              userDevice;
             
            $log.info('$noblyPush');         

            if (!window.device || $rootScope.deviceRegistered) return;
         
            device = $cordovaDevice.getDevice();   
            pushConfig = device.platform.toLowerCase() === 'ios' ? iosConfig: androidConfig;

            $cordovaPush.register(pushConfig).then(function(data) {     
                userDevice = { 
                                device: {
                                         deviceId: device.uuid,
                                         platform: device.platform 
                                        }
                            };

                if(device.platform.toLowerCase() === 'ios'){
                    userDevice.device.deviceToken = data.deviceToken;
                    storeDeviceToken();
                }                    
              
            }, function(err) {              
                if(cb) cb();
            });

            $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {                
              // Only testing on Android right now... one slow step at a time, ha.
              if (device.platform.toLowerCase() === 'android') handleAndroid(notification);              
            });
            function handleAndroid(notification) {                
                if(notification.event === 'registered') {                    
                    userDevice.device.deviceToken = notification.regid;
                    storeDeviceToken();
                }
                else if(notification.event === 'message'){
               
                // This works like a charm if the app is open and running.  If not, nothing happens.    
                $cordovaDialogs.alert(notification.payload.Message, 'Nobly Notification');                                                                   

                  // I get no feedback from this at all, whether the app is open, running in the background, or closed completely.  This is where I was hoping the badge/status-bar notification could be set.  But there doesn't seem to be any options for specifying the notification title, text, or icon.  $cordovaLocalNotification has these, but that doesn't seem like the correct solution for notifications triggered from another device... Am I wrong?
                   $cordovaBadge.hasPermission().then(function(){
                        $cordovaBadge.get(function(currentCount){
                            $cordovaDialogs.alert('returned from badge set: ' + currentCount);       
                            $cordovaBadge.set(currentCount + 1);
                        });
                    }, function(){
                        $cordovaDialogs.alert('not allowed');       
                    });
                                                
                }
            }

            function storeDeviceToken(){     
                  $noblyHttp({
                    method: 'PUT',
                    url: '/me',
                    showLoading: true,
                    data: userDevice
                  }, function(err, data, status, config){                       
                      if(status == 200) $rootScope.deviceRegistered = true; 
                      if (cb) cb();
                  });  
            }
          }
  }])

Any and all suggestions are most appreciated. Thanks for your time!!