Notificaciones Toast programadas en aplicaciones Metro

- 8 minutos de lectura

Las notificaciones de sistema o Toast son los mensajes que aparecen en la esquina de la pantalla y que pueden ir acompa帽ados de una imagen, texto y sonido. Lo m谩s interesante de este tipo de notificaciones es que se muestran aunque la aplicaci贸n no est茅 en ejecuci贸n. Esto quiere decir que la aplicaci贸n puede programar una serie de notificaciones para que se muestren en una horas determinadas. Adem谩s es posible enviar una notificaci贸n a trav茅s de Windows Push Notification Services (WNS). En este primer articulo vamos a ver los conceptos b谩sicos y c贸mo crear notificaciones programadas y dejaremos para la segunda parte, el escenario realmente interesante, enviar las notificaciones Push desde nuestro servicio en Windows Azure.

Comenzamos creando el objeto ToastNotifier que se encargar谩 de programar las notificaciones, este objeto se instancia mediante el m茅todo createToastNotifier de la clase Windows.UI.Notifications.ToastNotificationManager.

var toast = Windows.UI.Notifications; var notifier = toast.ToastNotificationManager.createToastNotifier();</pre> Es importante comprobar si las notificaciones est谩n activadas, ya que el usuario o un administrador v铆a pol铆ticas de grupo pueden deshabilitar el uso de notificaciones desde el panel de control a nivel general de todo el sistema operativo o por aplicaci贸n. En caso de tener habilitadas las notificaciones la propiedad setting tendr谩 el valor enabled, y en caso contrario el motivo por el que no lo est谩n (bloqueado por aplicaci贸n, por usuario, por pol铆ticas de grupo o por manifiesto).

if (notifier.setting != toast.NotificationSetting.enabled) {
    var dialog = new Windows.UI.Popups.MessageDialog("Las notificaciones no est谩n habilitadas.");
    dialog.showAsync();
    return;
}

Las notificaciones Toast, al igual que las Tiles, est谩n basadas en plantillas XML. Mediante el m茅todo GetTemplateContent podemos obtener el contenido XML para poder personalizarlo. Este m茅todo necesita que Indiquemos la plantilla mediante un valor de la enumeraci贸n ToastTemplateType. Hay disponibles 8 plantillas que combinan im谩genes y texto. Todos los tipos de plantillas disponibles se pueden ver en la ayuda sobre ToastTemplateType en la MSDN.

var templateXml = toast.ToastNotificationManager.getTemplateContent(toast.ToastTemplateType.toastImageAndText04);

Este m茅todo devuelve un objeto XmlDocument que debemos personalizar modificando el contenido y el texto. En el siguiente ejemplo la plantilla modificamos el primer elemento de tipo text.

var textElements = templateXml.getElementsByTagName("text");
element[0].appendChild(template.createTextNode("Recordatorio evento SNUG!"));

Sin embargo, algunas plantillas pueden contener varios elementos de texto o imagenes. Por ejemplo, la plantilla toastImageAndText04 que contiene una imagen y tres l铆neas de texto. En el siguiente c贸digo se establece el contenido de la imagen y de los tres elementos de texto.

// Imagen
var imageElements = templateXml.getElementsByTagName("image");
imageElements[0].setAttribute("src", "ms-appx:///images/win8startscreen.jpg");

// Texto
var element = templateXml.getElementsByTagName("text");
element[0].appendChild(templateXml.createTextNode("Recordatorio Evento SNUG!"));
element[1].appendChild(templateXml.createTextNode("Aplicaciones Metro para Desarrolladores Web"));
element[2].appendChild(templateXml.createTextNode("Martes, 10 de julio"));

Tambi茅n es posible especificar un sonido que se reproduzca cuando se muestre la notificaci贸n. Simplemente tenemos que crear un elemento audio y como source de este elemento indicar un sonido del sistema mediante alguno de estos valores: alguno de estos valores: Notification.Default, Notification.IM, Notification.Mail, Notification.Reminder, Notification.SMS, Notification.Looping.Alarm, Notification.Looping.Alarm2, Notification.Looping.Call, Notification.Looping.Call2. Los cinco primeros son sonidos que se reproducen una sola vez y no se repiten, y el resto son sonidos a los que podemos indicar que se repitan, asignando el atributo loop. En el siguiente ejemplo se muestra como crear el elemento audiopara que se reproduzca indefinidamente hasta que el usuario pulse en la notificaci贸n.

var toastNode = templateXml.selectSingleNode("/toast");
var audioElement = templateXml.createElement("audio");
audioElement.setAttribute("src", "ms-winsoundevent:Notification.Looping.Call");
audioElement.setAttribute("loop", "true");
toastNode.setAttribute("duration", "long");
toastNode.appendChild(audioElement);

Si queremos que no se reproduzca el sonido podemos establecer el valor del atributo silent a true.

Ya por 煤ltimo, si queremos que al pulsar sobre la notificaci贸n se lance nuestra aplicaci贸n tenemos que especificar los argumentos que queremos pasar en el atributo launch. En el siguiente c贸digo se muestra c贸mo hacerlo.

templateXml.selectSingleNode("/toast").setAttribute("launch", '{"type":"toast","parameter1":"12345"}');

Una vez tengamos la plantilla personalizada, s贸lo tenemos que programar la notificaci贸n para una fecha determinada mediante el m茅todo ScheduledToastNotification. A este m茅todo le pasamos la plantilla y la fecha la que queremos mostrar y la a帽adimos a la colecci贸 de notificaciones programadas mediante el m茅todo addToSchedule.

En el siguiente c贸digo especificamos la fecha actual m谩s 10 segundos.

var date = new Date(new Date().getTime() + 10000);
var stn = toast.ScheduledToastNotification(template, date);
notifier.addToSchedule(stn);

El c贸digo completo del m贸dulo es el siguiente, en el que se define el espacio de nombres notifications y el m茅todo scheduleToast.

(function () {
    "use strict";

    var toast = Windows.UI.Notifications;

    WinJS.Namespace.define("notifications", {

        scheduleToast: function () {

            var notifier = toast.ToastNotificationManager.createToastNotifier();

            if (notifier.setting != toast.NotificationSetting.enabled) {
                new Windows.UI.Popups.MessageDialog("Las notificaciones est谩n deshabilitadas").showAsync();
                return;
            }

            var templateXml = toast.ToastNotificationManager.getTemplateContent(toast.ToastTemplateType.toastImageAndText04);

            // Imagen
            var imageElements = templateXml.getElementsByTagName("image");
            imageElements[0].setAttribute("src", "ms-appx:///images/win8startscreen.jpg");

            // Texto
            var element = templateXml.getElementsByTagName("text");
            element[0].appendChild(templateXml.createTextNode("Recordatorio Evento SNUG"));
            element[1].appendChild(templateXml.createTextNode("Aplicaciones Metro para Desarrolladores Web"));
            element[2].appendChild(templateXml.createTextNode("Martes, 10 de julio"));

            // Sonido
            var toastNode = templateXml.selectSingleNode("/toast");
            var audioElement = templateXml.createElement("audio");
            audioElement.setAttribute("src", "ms-winsoundevent:Notification.Looping.Call");
            audioElement.setAttribute("loop", "true");
            toastNode.setAttribute("duration", "long");
            toastNode.appendChild(audioElement);

            // Par谩metros
            templateXml.selectSingleNode("/toast").setAttribute("launch", '{"type":"toast","parameter1":"12345"}');

            // Programaci贸n
            var date = new Date(new Date().getTime() + 3000);
            var stn = toast.ScheduledToastNotification(templateXml, date);
            notifier.addToSchedule(stn);
        }
    });
})();

El 煤nico cambio que queda por hacer es modificar el manifiesto de la aplicaci贸n para indicar que la aplicaci贸n puede enviar y recibir notificaciones. Para indicar esta capacidad, abrimos el fichero appmanifest.xml y marcamos la casilla Capacidad de aviso (Toast Capable) en la pesta帽a Application UI. Desde esta pesta帽a se puede indicar el color de fondo, que es el mismo que el de la pantalla de presentaci贸n (splash screen), el color del texto y la imagen del logotipo peque帽o que aparece en la esquina de la notificaci贸n.

Hasta aqu铆 esta entrada en la que hemos visto c贸mo programar notificaciones del sistema, en el siguiente art铆culo veremos como utilizar las notificaciones Push desde un servicio en Windows Azure.

Referencias

Instrucciones y lista de comprobaci贸n de notificaciones del sistema
Toast notification overview (Metro style apps)

#programming #windows_store