Ionic Framework - Push Notifications en Mobile Web Apps (ngCordova)

Nov 27, 2014 8:00:00 AM / by daniel.comas

 

 

Hoy traemos un post bastante sorprendente sobre desarrollo de Mobile Web Apps. Después de un tiempo haciendo pruebas con PhoneGap, Ionic (el mejor hasta el momento) llega fuerte para quedarse.

 

En el ejemplo de hoy realizaremos una PUSH notification en parte servidor con PushSharp y después en el cliente, el registro del mobile y el receptor.

 

 

Precondición

 

Habilitar la API de PUSH en Google (GCM Android)

 

 

 

SERVER (Envío de PUSH)


API Public Key: Al habilitar la API en la web de google nos dará este identificador.

 

Device Registration ID: És el ID que nos dará cuando registremos el móbil con el plugin de Push de ngCordova. Ahora lo veremos.


var push = new PushBroker();
push.RegisterGcmService(new GcmPushChannelSettings("API PUBLIC KEY"));
push.QueueNotification(new GcmNotification().ForDeviceRegistrationId("DEVICE REGISTRATION ID")
.WithJson("{\"message\":\"Hello World by Daniel Comas Fernández @dcomasf!\"}"));




CLIENT (Instalar plugin PUSH ngCordova)

 

Está muy bién detallado en esta página: http://ngcordova.com/docs/#Push

 

 

 

CLIENT (Registro del Device y Receptor de Push)


El registro del mòbil nos darà un DEVICE REGISTRATION ID que es el que tendremos que poner en el envío de PUSH (SERVER). Añadimos el receptor de Push en el run para que si no tenemos la APP en background pueda recibir la notificación cuando inicie la APP.

 

.run(function($ionicPlatform, $cordovaPush, $rootScope) {
$ionicPlatform.ready(function() {
...

//PUT IN PUSH
if(ionic.Platform.isWebView()) {

var androidConfig = {
"senderID":"PROJECT NUMBER ID (WE NEED CREATE A PROJECT IN GOOGLE.COM)",
};

androidConfig.ecb = "window.onNotification"

window.onNotification = function(e) {
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
//DEVICE REGISTRATION ID
alert(e.regid);
}
break;

case 'message':
alert(e.message);

//We send an angular broadcast notification
var elem = angular.element(document.querySelector('[ng-app]'));
var rootScope = elem.injector().get('$rootScope');
rootScope.$broadcast('pushNotificationReceived', e);
break;

case 'error':
alert(e.msg);
break;

default:
alert('unknown');
break;
}
};

//DEVICE REGISTER
$cordovaPush.register(androidConfig).then(function(result) {
alert(result);
}, function(err) {
alert(err);
});

$rootScope.$on('pushNotificationReceived', function(event, notification) {
//WE RECEIVE THE BROADCAST
alert("received");
});
}
});
})

 

 Ahora ya podemos hacer un ionic run android debugando con USB y disfrutar!

 

Topics: AngularJS, Framework, Ionic, JavaScript, Mobile, ngCordova, Programación, Push Notifications, Web App

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas