Inicio rápido: enviar una actualización de notificación (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Nota  ¿No usas JavaScript? Consulta Inicio rápido: enviar una actualización de notificación (XAML).

 

Este tema te muestra cómo crear o actualizar un distintivo en un icono. Enviarás una notificación de distintivo que incluya un valor numérico o un glifo. También aprenderás a quitar tu distintivo del icono.

Un distintivo es un número o glifo que se muestra en el icono para indicar de alguna manera el estado de una aplicación. El distintivo es una superposición en el icono, pero no forma parte de este. Puede aparecer en varios lugares en el icono:

  • En la esquina inferior derecha en Windows si se usa un idioma de izquierda a derecha, como el inglés
  • En la esquina inferior izquierda en Windows si se usa un idioma de derecha a izquierda, como el árabe
  • En la esquina superior derecha en Windows Phone 8.1 si se usa un idioma de izquierda a derecha
  • En la esquina superior izquierda en Windows Phone 8.1 si se usa un idioma de derecha a izquierda

El distintivo se manipula mediante sus propias API y esquema, y se actualiza a través de sus propias notificaciones. Este tema te guía por el procedimiento para definir el contenido de un distintivo, enviarlo a través de una notificación y quitarlo una vez que ya no sea necesario. Estas acciones se demuestran con una notificación local, que es la notificación más simple de implementar.

Nota  En este tema, manipularás el contenido de la notificación directamente a través del Document Object Model (DOM) XML. Un enfoque opcional se encuentra disponible a través de la biblioteca NotificationsExtensions, que presenta el contenido XML como propiedades de objeto, incluido IntelliSense. Para obtener más información, consulta Inicio rápido: usar la biblioteca NotificationsExtensions en el código. Para ver el código de este tema expresado mediante NotificationsExtensions, consulta la muestra de distintivos e iconos de la aplicación.

 

Requisitos previos

Para comprender este tema, necesitarás:

  • Conocimientos prácticos sobre los términos y conceptos de distintivos y notificaciones. Para más información, consulta el tema sobre iconos, distintivos y notificaciones.
  • Estar familiarizado con el esquema XML del distintivo. Para más información, consulta el tema sobre el esquema de distintivo.
  • Capacidad para crear una aplicación de la Tienda Windows con JavaScript básica mediante las API de Windows en tiempo de ejecución. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript.
  • Estar familiarizado con XML y su manipulación mediante API de Document Object Model (DOM).

Instrucciones

1. Opcional: declarar una variable de espacio de nombres

Este paso te proporciona un nombre corto para que lo uses en lugar del nombre completo del espacio de nombres. Es el equivalente de una instrucción "using" en C# o de la instrucción "Imports" en Visual Basic. Esto permite simplificar el código.

Nota  El resto del código de este tema da por hecho que se ha declarado esta variable.

 


var notifications = Windows.UI.Notifications;

2. Elegir si se muestra un número o un glifo

Una notificación puede mostrar los números del 0 al 99 o un glifo de un conjunto de glifos de estado definidos por el sistema. La notificación que elijas dependerá de tu escenario. Por ejemplo, un programa de correo electrónico puede mostrar el número de mensajes no leídos o el glifo "mensaje nuevo" cuando se recibe un nuevo mensaje de correo electrónico. Para obtener más información acerca de los glifos disponibles, consulta Introducción a las notificaciones. Para más información sobre cuándo usar números o glifos, consulta Directrices y lista de comprobación de iconos y notificaciones.

Nota  Desde Windows Phone 8.1, solo se admiten como notificaciones de teléfono los glifos de estado "alerta" y "atención". El envío de cualquier otro glifo al teléfono borrará la notificación.

Los distintivos numerados y los distintivos de glifo se definen mediante plantillas de distintivo específicas y distintas. Debes recuperar la plantilla correspondiente para el tipo de distintivo que hayas decidido usar. En este ejemplo, se recupera la plantilla para un distintivo numérico.


var badgeType = notifications.BadgeTemplateType.badgeNumber;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

En este ejemplo, se recupera la plantilla para un distintivo de glifo.


var badgeType = notifications.BadgeTemplateType.badgeGlyph;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

3. Asignar un valor al distintivo

En este ejemplo, se recupera el elemento badge de la plantilla y se le asigna un valor numérico.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "7");

En este ejemplo, se asigna un valor de glifo al distintivo.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "newMessage");

4. Crear la notificación de distintivo y enviarla al distintivo

En este ejemplo, se empaqueta el XML definido en una notificación y se envía al distintivo.


var badgeNotification = new notifications.BadgeNotification(badgeXml);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

5. Opcional: borrar el distintivo si ya no es válido

Si la información que se transmite en el glifo o número del distintivo está desactualizada o ya no es útil, debes quitarlo. El siguiente código quita el distintivo actual del icono de la aplicación que llama. También podrías enviar el valor "none" como actualización de distintivo en lugar de llamar al método Clear.

Nota  A diferencia de los iconos, los distintivos se pueden borrar a través de la nube.

 


notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().clear();

Resumen y siguientes pasos

En este inicio rápido definiste y enviaste contenido nuevo a un distintivo en el icono de tu aplicación y lo quitaste cuando ya no era válido.

Este inicio rápido envió la actualización de distintivo como una notificación local. También puedes explorar los otros métodos de entrega de notificaciones: programadas, periódicas y de inserción. Para más información, consulta el tema sobre la entrega de notificaciones.

Temas relacionados

Introducción a los distintivos

Esquema de distintivo

BadgeTemplateType

BadgeNotification

Inicio rápido: configurar notificaciones periódicas