azure notification hub client side code using ngCordova and PushPlugin in Ionic

Question

Which is the right plugin to be used for Azure notification hub, for ionic app? There are many plugins for push notification in Phonegap/Cordova and some of them are already deprecated. Please provide some reference links for code snippets of ionic client side implementation Azure notification hub, and node.js server side implementation for the same.

Answer 1

In my test Ionic project, I used Mobile Services plug-in repository at https://github.com/Azure/azure-mobile-services-cordova.git and PushPlugin at https://github.com/phonegap-build/PushPlugin.git .

Here is the code snippet integrating GCM:

Initial mobile service client and GCM configurations:

    /****
    Mobile service configs
    ****/
    var mobileServiceClient;
    var mobileServiceUrl = 'https://<your_mobile_service_name>.azure-mobile.net/';
    var mobileSerivceKey = '<your service key>';

    /****
    Notification hubs configs
    *****/
    var GCM_SENDER_ID = 'gcm_sender_id_number'; // Replace with your own ID.
    var androidConfig = {
        "senderID": GCM_SENDER_ID,
      };

Configure GCM and Azure notification hub in app configuration of angular module:

angular.module('myapp', ['ionic','ngCordova'])
.run(function($ionicPlatform,$rootScope,$cordovaPush) {
  $ionicPlatform.ready(function() {

    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    //init mobileServiceClient
    mobileServiceClient = new WindowsAzure.MobileServiceClient(mobileServiceUrl,mobileSerivceKey);
    //register notification push
    console.log("======mobileServiceClient inited going on ======");
    $cordovaPush.register(androidConfig).then(function(result) {
      // Success
      console.log("=============register finished========");
    }, function(err) {
      // Error
    })
    $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
      switch(notification.event) {
        case 'registered':
          if (notification.regid.length > 0 ) {
            $rootScope.GCM_status = true;
            alert('registration ID = ' + notification.regid);
              //register to Azure Mobile Service
            if (mobileServiceClient) {
              // Template registration.
              var template = '{ "data" : {"message":"$(message)"}}';
              // Register for notifications.
              mobileServiceClient.push.gcm.registerTemplate(notification.regid,
                "myTemplate", template, null)
              .done(function () {
                  $rootScope.Azure_Push_status = true;
                  alert('Registered template with Azure!');
              });
              // .fail(function (error) {
              //     alert('Failed registering with Azure: ' + error);
              // });
            }
          }
          break;

        case 'message':
          // this is the actual push notification. its format depends on the data model from the push server
          alert('message = ' + notification.message + ' msgCount = ' + notification.msgcnt);
          break;

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

        default:
          alert('An unknown GCM event has occurred');
          break;
      }
    });
    // WARNING: dangerous to unregister (results in loss of tokenID)
    $cordovaPush.unregister().then(function(result) {
      // Success!
    }, function(err) {
      // Error
    })

  });
})

Please refer to Microsoft Azure : Push Notifications to Cordova Apps with Microsoft Azure for more information about integrating Azure notification hub in Cordova apps.