Uno de los mayores problemas al trabajar con múltiples plataformas móviles, es el envío de notificaciones desde nuestro backend. En Azure tenemos disponible un servicio llamado NotificationsHub, que nos permite simplificar esta tarea.
Configurando un hub de notificaciones
Para empezar, necesitaremos configurar un centro de notificaciones en nuestra cuenta de Azure, desde el portal de administración. El apartado de Notifications Hub se encuentra dentro de la parte de Service Bus:
Tendremos que indicar un nombre del servicio, la región en la que queremos ejecutarlo y el namespace que usaremos. Una vez que lo hayamos creado, podemos entrar a su configuración. Lo unico que necesitamos en primera instancia es configurar las credenciales de cada Store (Apple Store, Google Play y Microsoft Store). Cada una de ellas tiene su propia configuración:
-
Apple Store: Necesitaremos generar un certificado digital que debemos generar con nuestra cuenta de desarrollador.
-
Windows Phone (MPNS) Necesitaremos generar un certificado digital.
-
Windows y Windows Phone (WNS) Tenemos que indicar el SID del paquete de nuestra aplicación y el secreto.
-
Google Play: Tenemos que indicar la clave de GCM (Google Cloud Messaging).
Vamos a ver como obtener las credenciales necesarias para Windows Phone (WNS) y para Google Play a continuación.
WNS
Para obtener el SID y el secreto de una aplicación que use WNS (Windows 8.1 o Windows Phone 8.1) Debemos tenerla asociada con la tienda en primer lugar y con un nombre reservado. Esto no significa que tenga que estar publicada. Simplemente debemos crear el proceso de publicación y reservar un nombre. Una vez hecho esto, en los detalles de la aplicación, en el dashboard de Windows Store podremos ir al apartado servicios:
Donde encontraremos un enlace para visitar el sitio de servicios Live:
En el sitio de Servicio Live, encontraremos los datos que necesitamos, el SID de paquete y la clave secreta:
Esos dos datos son los que necesitamos configurar en nuestro Notifications Hub, en la parte de WNS:
Y listo, ya tenemos todo lo necesario para que nuestro NotificationHub envie notificaciones a nuestra app Windows Phone o Windows Store.
Google Play
Google Play también requiere que realicemos cierta configuración en las APIs de google. Tenemos que ir a console.developers.google.com y crear un nuevo proyecto para nuestra aplicación. En el ejemplo crearemos un proyecto llamado NSHubSample con id: nshubsample-xamarin.
Dentro del proyecto tendremos que ir a la sección de APIs y habilitar el API Google Cloud Messaging for Android. Después, en la sección de credenciales tendremos que crear una nueva clave de servidor (clave pública) y quedarnos con la clave de API:
Ya solo tenemos que volver a la configuración de nuestro Notification Hub y añadir la clave de API de Google Play en la sección de Google Cloud Messaging settings:
Bien, con esto ya tenemos configurado nuestro notification hub para enviar mensajes a aplicaciones Windows, Windows Phone y Android. Como último paso, necesitaremos las cadenas de conexión para comunicarnos desde el servidor que envíe las notificaciones y desde las apps cliente. Podemos encontrarlas en la página principal de nuestro Notifications Hub, en el link “View Connection Strings”:
Al pulsar, se abrirá un popup en el que se mostrarán dos cadenas de conexión:
Nos quedaremos con ambas guardadas para usarlas en los siguientes pasos.
Ahora vamos a por la parte de las apps cliente. Usando Xamarin, vamos a crear una app para Android, Windows y Windows Phone.
Obteniendo los canales de notificación
Aunque con Xamarin podemos compartir la mayoría del código, la parte de registrar nuestro dispositivo/app con la nube de notificaciones es única en cada plataforma, al igual que el registro que hemos tenido que hacer anteriormente.
Windows XAML
Para comenzar, necesitaremos instalar el paquete “Windows Azure Service Bus Managed for Windows Store and Windows Phone”, desde el gestor de paquetes de NuGet en nuestro proyecto universal. Este paquete nos facilitará la tarea de enviar a Notifications Hub nuestros canales de notificaciones.
Para obtener estos canales de notificaciones usaremos la clase PushNotificationChannelManager, del namespace Windows.Networking.PushNotifications. Para ello usaremos el método CreatePushNotificationChannelForApplicationAsync. Una vez que tengamos el canal de notificaciones, se lo enviaremos a nuestro notifications hub. Para ello crearemos una nueva instancia de la clase NotificationHub, pasándo como parámetro:
-
El nombre de nuestro Notification Hub creado anteriormente, en este caso: nhsampledemo.
-
La cadena de conexión DefaultListenSharedAccessSignature que hemos obtenido anteriormente.
Finalmente, llamamos al método RegisterNativeAsync, pasándole la Uri del canal obtenido al principio como parámetro.
private async void InitNotificationsAsync() { var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
var hub = new NotificationHub("nhsampledemo", "<Endpoint listen>");
var result = await hub.RegisterNativeAsync(channel.Uri);
}
Y con esto ya hemos registrado el canal de notificaciones para Windows y Windows Phone.
Android
En Android, necesitaremos en primer lugar instalar el componente de Google Cloud Messaging Client. Para ello hacemos click derecho sobre la carpeta Components del proyecto Android y seleccionamos la opción “Get more components”. Esto nos mostrará la lista de componentes disponibles, solo tendremos que buscar “Google Cloud Messaging Client”, hacer click sobre él y a continuación sobre el botón verde “Add to App”:
Para registrar nuestra aplicación, necesitaremos además el ID de proyecto de google api console que creamos anteriormente. Lo podemos encontrar en la página principal del proyecto:
Ahora si, ya podemos escribir el código necesario para registrar nuestra app con la nube de mensajes de google. Por ejemplo, en el método OnCreate de nuestra primera vista:
private void RegisterWithGCM()
{
GcmClient.CheckDevice(this);
GcmClient.CheckManifest(this);
GcmClient.Register(this, "<PROJECT ID>");
}
El método CheckDevice comprueba que el dispositivo soporta los servicios de google play, necesarios para tener notificaciones. CheckManifest comprueba que hemos establecido las configuraciones necesarias en el manifiesto de la aplicación. Por último registramos nuestra aplicación con el método Register, en el que usamos el id de proyecto que hemos obtenido anteriormente.
Ahora ya tenemos nuestra app de Android registrada, pero para poder recibir notificaciones necesitaremos crear un servicio en background que las procese cuando lleguen al dispositivo. Para ello necesitaremos crear dos nuevas clases:
-
MyBroadcastReceiver, que se registrará como receptor de Google Cloud Messaging
-
GcmService, que tendrá el código necesario para recibir y procesar nuestras notificaciones.
Necesitaremos decorar el namespace de estas clases con los atributos de permisos que necesitamos:
[assembly: Permission(Name = "notificationsHub.Android.permission.C2D_MESSAGE")] [assembly: UsesPermission(Name = "notificationsHub.Android.permission.C2D_MESSAGE")] [assembly: UsesPermission(Name = "com.google.android.c2dm.permission.RECEIVE")]
[assembly: UsesPermission(Name = "android.permission.GET_ACCOUNTS")]
[assembly: UsesPermission(Name = "android.permission.INTERNET")]
[assembly: UsesPermission(Name = "android.permission.WAKE_LOCK")]
namespace NotificationsHub.Android
La clase MyBroadfcastReceiver también tiene que estar decorada con algunos atributos para identificarla correctamente. Tiene que heredar ademas de la clase GcmBroadcastReceiverBase<>:
[BroadcastReceiver(Permission = Gcm.Client.Constants.PERMISSION_GCM_INTENTS)] [IntentFilter(new string[] { Gcm.Client.Constants.INTENT_FROM_GCM_MESSAGE }, Categories = new string[] { "@PACKAGE_NAME@" })] [IntentFilter(new string[] { Gcm.Client.Constants.INTENT_FROM_GCM_REGISTRATION_CALLBACK }, Categories = new string[] { "@PACKAGE_NAME@" })] [IntentFilter(new string[] { Gcm.Client.Constants.INTENT_FROM_GCM_LIBRARY_RETRY }, Categories = new string[] { "@PACKAGE_NAME@" })] public class MyBroadcastReceiver : GcmBroadcastReceiverBase<GcmService> { public static string[] SENDER_IDS = new string[] { "<PROJECT ID>" };
public const string TAG = "MyBroadcastReceiver-GCM";
}
GcmService, se decora con el atributo Service y hereda de GcmServiceBase. Además tendremos que agregar el paquete de NuGet Xamarin.NotificationHub al proyecto Android para poder crear el código de esta clase:
[Service] //Must use the service tag public class GcmService : GcmServiceBase { public static string RegistrationID { get; private set; } private NotificationHub Hub { get; set; }
public GcmService() : base("<PROJECT ID>")
{
Log.Info(MyBroadcastReceiver.TAG, "GcmService() constructor");
}
protected override async void OnRegistered(Context context, string registrationId)
{
Log.Verbose(MyBroadcastReceiver.TAG, "GCM Registered: " + registrationId);
RegistrationID = registrationId;
createNotification("GcmService-GCM Registered…", "The device has been Registered, Tap to View!");
Hub = new NotificationHub("nhsampledemo", "<listen endpoint>");
try
{
await Hub.UnregisterAllAsync(registrationId);
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
Debugger.Break();
}
try
{
List<string> TAGS = new List<string>()
{
};
var hubRegistration = await Hub.RegisterNativeAsync(registrationId, TAGS);
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
Debugger.Break();
}
}
protected override void OnMessage(Context context, Intent intent)
{
Log.Info(MyBroadcastReceiver.TAG, "GCM Message Received!");
var msg = new StringBuilder();
if (intent != null && intent.Extras != null)
{
foreach (var key in intent.Extras.KeySet())
msg.AppendLine(key + "=" + intent.Extras.Get(key).ToString());
}
string messageText = intent.Extras.GetString("msg");
if (!string.IsNullOrEmpty(messageText))
{
createNotification("New hub message!", messageText);
return;
}
createNotification("Unknown message details", msg.ToString());
}
void createNotification(string title, string desc)
{
var notificationManager = GetSystemService(Context.NotificationService) as NotificationManager;
var uiIntent = new Intent(this, typeof(FirstView));
var notification = new Notification(Android.Resource.Drawable.Icon, title);
notification.Flags = NotificationFlags.AutoCancel;
notification.SetLatestEventInfo(this, title, desc, PendingIntent.GetActivity(this, 0, uiIntent, 0));
notificationManager.Notify(1, notification);
}
protected override void OnError(Context context, string errorId)
{
//Manage errors
}
protected override void OnUnRegistered(Context context, string registrationId)
{
//Manage unregistering services.
}
}
Podemos encontrar cuatro métodos importantes en esta clase: OnRegistered, OnMessage, OnError y OnUnRegistered:
-
OnRegistered se ejecuta cuando, en el paso anterior, registramos la aplicación con el backend Google Cloud Messaging, recibe el contexto y el id de registro, creamos una nueva instancia de la clase NotificationHub, des registramos las notificaciones que usen ese mismo ID, si había alguna, y a continuación llamamos a RegisterNativeAsync, igual que en Windows XAML.
-
OnMessage es invocado cuando recibimos un mensaje desde Google Cloud Messaging, en este caso procesamos el mensaje y lo mostramos en pantalla creando una nueva notificación.
-
OnError se lanza si se produce un error.
-
OnUnRegistered se ejecuta si esta instancia activa es des registrada.
iOS
Para iOS trabajaremos sobre la clase AppDelegate. Pero en primer lugar, tendremos que añadir un componente, de la misma forma que hicimos en Android. En este caso necesitamos el componente de Azure Mobile Services. También tendremos que añadir una referencia a la librería de WindowsAzure.Messaging para iOS. Todavía no existe un paquete exclusivo para ella, se descarga junto a la de Android que instalamos anteriormente.
Una vez instalado Azure Mobile Services, en la clase AppDelegate tenemos que sobre escribir los métodos FinishedLaunching, RegisterForRemoteNotifications y ReceivedRemoteNotification. En FinishedLaunching tenemos que añadir la llamada al registro de la aplicación en el servicio de notificaciones:
UIApplication.SharedApplication.RegisterForRemoteNotificationTypes(notificationTypes);
Tras ésta llamada, se lanzará el método RegisteredForRemoteNotifications, donde recibiremos el token del dispositivo y lo registraremos en nuestro notifications hub:
public override async void RegisteredForRemoteNotifications(UIApplication application, NSData deviceToken)
{
Hub = new NotificationHub(ConnectionString, NotificationHubPath);
await Hub.UnregisterAllAsync(deviceToken.ToString());
await Hub.RegisterNativeAsync(deviceToken.ToString());
}
Cuando recibamos una notificación, se llamará al método ReceivedRemoteNotification, con la información de la misma dentro de un diccionario:
public override void ReceivedRemoteNotification(UIApplication application, NSDictionary userInfo) { ProcessNotification(userInfo, false); }
void ProcessNotification(NSDictionary options, bool fromFinishedLaunching)
{
// Check to see if the dictionary has the aps key. This is the notification payload you would have sent
if (options != null && options.ContainsKey(new NSString("aps")))
{
//Get the aps dictionary
NSDictionary aps = options.ObjectForKey(new NSString("aps")) as NSDictionary;
string alert = string.Empty;
if (aps.ContainsKey(new NSString("alert")))
alert = (aps[new NSString("alert")] as NSString).ToString();
//If this came from the ReceivedRemoteNotification while the app was running,
// we of course need to manually process things like the sound, badge, and alert.
if (!fromFinishedLaunching)
{
//Manually show an alert
if (!string.IsNullOrEmpty(alert))
{
UIAlertView avAlert = new UIAlertView("Notification", alert, null, "OK", null);
avAlert.Show();
}
}
}
}
En este caso, tenemos que diferenciar si el método se llama desde el FinishedLaunching o no, para decidir si debemos o no mostrar la notificación recibida.
Y con esto hemos terminado con las aplicaciones cliente. Ahora podemos crear nuestro Servicio que envíe las notificaciones al Notification Hub para que este las distribuya a los diferentes servicios.
Servidor
Como ejemplo, usaremos una aplicación WPF muy sencilla, con unos botones que nos permitan enviar una notificación a cada plataforma. Para ello necesitaremos dos paquetes de NuGet:
El paquete Microsoft.WindowsAzure.ConfigurationManager se instalará automáticamente al instalar WindowsAzure.ServiceBus, como una dependencia. Una vez instalado este paquete, podremos escribir el siguiente código para enviar una notificación WNS (Windows Notification Service):
private async void Send_Windows(object sender, RoutedEventArgs e)
{
NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString("<FULLSHAREDACCESS ENDPOINT>", "nhsampledemo");
var toast = @"<toast><visual><binding template=""ToastText01""><text id=""1"">Hello from a .NET App!</text></binding></visual></toast>";
await hub.SendWindowsNativeNotificationAsync(toast);
}
Para Android y Google Cloud Messaging, usaríamos este código:
private async void Send_Android(object sender, RoutedEventArgs e)
{
NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString("<FULLSHAREDACCESS ENDPOINT>", "nhsampledemo");
var message = "{ \"data\" : {\"msg\":\"Hello from Azure!\"}}";
var result = await hub.SendGcmNativeNotificationAsync(message);
}
Para iOS tendríamos el siguiente código:
private async void Send_iOS(object sender, RoutedEventArgs e)
{
NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString("<FULL ENDPOINT>", "nhsampledemo");
var alert = "{\"aps\":{\"alert\":\"Hello from .NET!\"}}";
await hub.SendAppleNativeNotificationAsync(alert);
}
En ambos casos, el proceso es el mismo. Primero creamos una nueva instancia de la clase NotificationHubClient, pasándo la connection string de full access y el nombre de nuestro Notification hub. A continuación creamos el “payload”, la notificación que deseamos enviar. En este paso, tenemos que usar el formato nativo de cada plataforma de notificaciones. Para conocer como escribir esta “payload”, podemos visitar la página de cada plataforma:
Por último, para cada plataforma tenemos un método de envío de la notificación. En este ejemplo usamos SendWindowsNativeNotificationAsync para WNS y SendGcmNativeNotificationAsync para GCM.
Ya solo nos queda ejecutar las aplicaciones cliente para que se registren y lanzar la aplicación WPF para que envíe la notificación a cada una de ellas. La mejor parte de Notifications Hub, es no tener que pelearnos en nuestro servidor con tres APIs de notificaciones totalmente distintas. Nos permite centrarnos en crear las notificaciones y enviarlas de forma sencilla.
Puedes ver el código del ejemplo en GitHub, pero recuerda sustituir <LISTEN ENDPOINT>, <FULL ENDPOINT>, <PROJECT ID> y “nhsampledemo” por los valores correctos de tú Notification Hub, para hacerlo funcionar.
Un saludo y Happy Coding!
