Inicio rápido: enviar notificaciones a un icono secundario (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 notificaciones a un icono secundario (XAML)
En este inicio rápido se muestra cómo actualizar un icono secundario de la aplicación mediante el envío de una notificación local. Verás que el envío de una notificación a un icono secundario es idéntico al envío de una notificación al icono principal de la aplicación, a excepción del paso final. La única diferencia entre los dos procedimientos es que, para los iconos secundarios, se usa un actualizador de iconos específico de los iconos secundarios (CreateTileUpdaterForSecondaryTile).
Para ver el código que se proporciona en este tema usado en una muestra completa, consulta la muestra de iconos secundarios. La muestra se proporciona en las versiones de JavaScript, C#, C++ y Visual Basic.
Cuando se inicia una aplicación, siempre debe enumerar sus iconos secundarios, por si se han realizado adiciones o eliminaciones de las cuales no estaba al tanto. Cuando un usuario elimina un icono secundario, Windows simplemente quita el icono. La propia aplicación es responsable de liberar los recursos usados por el icono secundario. Cuando Windows copia iconos secundarios a través de la nube, las notificaciones de icono y distintivo actuales en el icono secundario, las notificaciones programadas, los canales de notificación de inserción y los Identificadores uniformes de recursos (URI) usados con las notificaciones periódicas no se copian con el icono secundario y deben volver a configurarse.
Nota En este inicio rápido, 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 inicio rápido expresado mediante NotificationsExtensions, consulta la muestra de iconos secundarios.
Requisitos previos
Para comprender este tema, necesitarás:
- Conocimientos prácticos sobre los términos y conceptos de iconos y notificaciones. Para más información, consulta el tema sobre iconos, distintivos y notificaciones.
- Estar familiarizado con el esquema XML del icono. Para más información, consulta el tema sobre el esquema de icono.
- 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.
- Un icono secundario existente para la aplicación. Para más información, consulta el tema de inicio rápido: anclaje de un icono secundario.
- 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 inicio rápido supone que se ha declarado esta variable.
var notifications = Windows.UI.Notifications;
2. Recuperar una plantilla de icono en blanco
Puede usarse cualquier plantilla de icono para los iconos secundarios. Aquí usamos la plantilla de solo texto simple TileWide310x150Text04.
var wideTemplate = notifications.TileTemplateType.tileWide310x150Text04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);
3. Asignar texto a la notificación
La plantilla TileWide310x150Text04 contiene un solo elemento de texto al que asignamos una cadena.
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("This text was delivered through a notification"));
4. Proporcionar la versión media de la notificación
Un procedimiento recomendado es proporcionar siempre un enlace para cada tamaño de icono que admite tu aplicación en cualquier carga de notificaciones enviada a un icono. Como parte de la operación de anclaje, el usuario puede seleccionar el tamaño de icono secundario entre las opciones que le proporciones. Si proporcionas un enlace en cada notificación para cada una de estas opciones de tamaño, garantizarás que la notificación se muestre independientemente del tamaño del icono. Si también admites un icono secundario grande, repite este paso y el siguiente para una de las plantillas grandes.
Nota Todos los iconos, incluidos los secundarios, se anclan como medianos en Windows Phone 8.1, tras lo cual el usuario puede cambiar su tamaño.
var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("This text was delivered through a notification"));
5. Anexar la notificación mediana a la carga de notificaciones amplia
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
6. Empaquetar el XML final como una notificación de icono
var tileNotification = new notifications.TileNotification(tileXml);
7. Crea un actualizador de iconos secundarios
Hasta este paso, el proceso es igual al de la notificación de icono estándar. En este paso, sin embargo, usamos el método createTileUpdaterForSecondaryTile específico de los iconos secundarios. Este método necesita el identificador único del icono secundario de destino. En este ejemplo, asumimos que hay un icono secundario con un identificador almacenado en la variable appbarTileId
anclado actualmente a la pantalla Inicio.
var updater = notifications.TileUpdateManager.createTileUpdaterForSecondaryTile(appbarTileId);
8. Enviar la notificación al icono secundario
updater.update(tileNotification);
9. Opcional: actualizar el logotipo del icono secundario
Debes proporcionar una imagen de logotipo cuando creas el icono secundario. La imagen de logotipo, llamada de esta forma porque normalmente muestra el logotipo de una aplicación, es una imagen del icono completo que se muestra en el icono antes de que se reciban las notificaciones. El icono se revierte a la imagen de logotipo si la notificación se quita o expira. En algunos escenarios, probablemente quieras cambiar la imagen de logotipo predeterminada, quizás para indicar que se ha realizado un cambio en el contenido anclado cuando no quieres enviar una actualización de notificación completa. Este paso también te muestra cómo cambiar el logotipo del icono secundario con un identificador almacenado en la variable appbarTileId
, mediante una imagen del almacenamiento local de la aplicación. Ten en cuenta que este ejemplo hace referencia a la clase Windows.Foundation.Uri.
var tileToUpdate = new Windows.UI.StartScreen.SecondaryTile("SecondaryTile.01");
var uriUpdatedLogo = new Windows.Foundation.Uri("ms-appdata:///local/NewSecondaryTileDefault.png");
tileToUpdate.logo = uriUpdatedLogo;
tileToUpdate.updateAsync();
Resumen y siguientes pasos
En este inicio rápido, enviaste una notificación a un icono secundario asociado con tu aplicación. Aprendiste que solo hay una pequeña diferencia entre el envío de una notificación al icono principal de la aplicación y el envío de una notificación a uno de sus iconos secundarios. También actualizaste la imagen de logotipo predeterminada de tu icono secundario.
Este inicio rápido envió la actualización de icono secundario 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
Inicio rápido: anclaje de un icono secundario
Inicio rápido: enviar una actualización de icono
Introducción a los iconos secundarios