implementing push notification in ionic app

Question

I am trying to implement push notification in ionic app for Android. I have followed step by step guide from http://docs.ionic.io/v1.0/docs/push-from-scratch. When I am running my app on android phone, then the registered users are listed in apps.ionic.io. So user registration is working fine. But device registration is not working. It is giving error Cannot read property 'pushNotification' of undefined

This is my code at the top of app.js

angular.module('starter', ['ionic','ngCordova',
    'ionic.service.core',
    'ionic.service.push',
    'starter.controllers',
    'starter.services'])

    .config(['$ionicAppProvider', function($ionicAppProvider) {
        // Identify app
        $ionicAppProvider.identify({
            // The App ID (from apps.ionic.io) for the server
            app_id: '',
            // The public API key all services will use for this app
            api_key: '',
            // Set the app to use development pushes
           // dev_push: true
            gcm_id: ''
        });
    }])

Here is the code in of my controller

 .controller('DashboardCtrl', function($scope,$localstorage, WildfireService, CommonUtilityService,PushNotificationService,$ionicPopup, $ionicLoading) {      
      PushNotificationService.identifyUser();
      PushNotificationService.pushRegister();

    })

Here is my services.js

 .service('PushNotificationService', function($q, $ionicUser, $ionicPush) {
        var PushNotificationService = this;
        PushNotificationService.identifyUser  = function(){
            var user = $ionicUser.get();
            if(!user.user_id) {
                // Set your user_id here, or generate a random one.
                user.user_id = $ionicUser.generateGUID();
            };

            // Add some metadata to your user object.
            angular.extend(user, {
                name: 'Technews',
                bio: 'Hardcoded for now'
            });

            // Identify your user with the Ionic User Service
            $ionicUser.identify(user).then(function(){
                //alert('Identified user ' + user.name + '\n ID ' + user.user_id);
                return true;
            });
        },

        PushNotificationService.pushRegister = function(){
            // Register with the Ionic Push service.  All parameters are optional.
            $ionicPush.register({
                canShowAlert: true, //Can pushes show an alert on your screen?
                canSetBadge: true, //Can pushes update app icon badges?
                canPlaySound: true, //Can notifications play a sound?
                canRunActionsOnWake: true, //Can run actions outside the app,
                onNotification: function(notification) {
                    // Handle new push notifications here
                    // console.log(notification);
                    alert(notification);
                    return true;
                }
            });
        }
    })

Can any one tell me where is the error or what I am missing?

I have added these in index.html

<script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/ionic-service-core/ionic-core.js"></script>
    <script src="lib/ionic-service-push/ionic-push.js"></script>

Answer 1

I don't know about this new Ionic push notifications. I succesfully implemented push notifications in my Ionic App with ngCordova's push plugin for both Android an iOS (http://ngcordova.com/docs/plugins/pushNotifications/) just by following the examples there. The key is to put the code in the .run module in app.js.

Here is the code:

angular.module('notPush', ['ionic','notPush.controllers','notPush.factorys','ngCordova','ionic.service.core'])

.run(function($ionicPlatform, $rootScope, $http, $cordovaPush) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    // Manejador de notificaciones push para Android
    if (ionic.Platform.isAndroid()){

      var androidConfig = {
        "senderID": "94XXXXXXXXXX", // ID HERE
        "ecb": "window.casosPush"
      };

      try{
        var pushNotification = window.plugins.pushNotification;
      } catch (ex){

      }

      // Llamada en caso de exito
      var successfn = function(result){
        alert("Success: " + result);
      };

      // Llamada en caso de error
      var errorfn   = function(result){
        window.alert("Error: " + result);
      };

      // Llamada de casos de notificacion push
      window.casosPush = function(notification){
        switch (notification.event){
          case 'registered':
            if (notification.regid.length > 0){
              alert('registration ID = ' + notification.regid);
            }
            break;

          case 'message':
            alert(JSON.stringify([notification]));
            break;

          case 'error':
            alert('GCM error = ' + notification.msg);
            break;

          default:
            alert('An unknown GCM event has occurred');
            break;
        }
      };
      try{

        // Llamada de registro con la plataforma GCM 
        pushNotification.register(successfn,errorfn,androidConfig);
      } catch(notification){

      }
    }
})

Just remember to install the plugin with

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Answer 2

Finally push notification is working for me. I moved the function call of pushRegister from controller to identifyUser function. So here is the new working code for me. Controller code

.controller('DashboardCtrl', function($scope,$localstorage, WildfireService, CommonUtilityService,PushNotificationService,$ionicPopup, $ionicLoading) {      
      PushNotificationService.identifyUser();


    })

Here is new services.js

 .service('PushNotificationService', function($q, $ionicUser, $ionicPush) {
            var PushNotificationService = this;
            PushNotificationService.identifyUser  = function(){
                var user = $ionicUser.get();
                if(!user.user_id) {
                    // Set your user_id here, or generate a random one.
                    user.user_id = $ionicUser.generateGUID();
                };

                // Add some metadata to your user object.
                angular.extend(user, {
                    name: 'Technews',
                    bio: 'Hardcoded for now'
                });

                // Identify your user with the Ionic User Service
                $ionicUser.identify(user).then(function(){
                    //alert('Identified user ' + user.name + '\n ID ' + user.user_id);
PushNotificationService.pushRegister();
                    return true;
                });
            },

            PushNotificationService.pushRegister = function(){
                // Register with the Ionic Push service.  All parameters are optional.
                $ionicPush.register({
                    canShowAlert: true, //Can pushes show an alert on your screen?
                    canSetBadge: true, //Can pushes update app icon badges?
                    canPlaySound: true, //Can notifications play a sound?
                    canRunActionsOnWake: true, //Can run actions outside the app,
                    onNotification: function(notification) {
                        // Handle new push notifications here
                        // console.log(notification);
                        alert(notification);
                        return true;
                    }
                });
            }
        })