> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-2-antes-de-comenzar.-el-terreno-de-juego/notificaciones.md).

# Notificaciones

#### Notificaciones

Al mismo tiempo que contamos con los controles que muestran mensajes al usuario, podemos contar con otros mecanismos para este mismo propósito a modo de notificaciones o mensajes emergentes, incluso cuando la aplicación no se está ejecutando en primer plano.

**Tiles**

Los azulejos o baldosas, en adelante **tiles**, permiten presentar un contenido rico y atractivo en la pantalla de inicio (o *Start Screen*) en Windows Mobile, o en el menú de inicio en Windows, cuando la aplicación no se está ejecutando. Un tile comienza como un valor predeterminado, definido en el manifiesto de la aplicación y puede ser de dos tipos:

* **Estático**. Siempre mostrará el contenido predeterminado, que suele ser una imagen del logotipo incluida en el manifiesto de la aplicación.
* **Dinámico** o vivo (actualizados a través de notificaciones). Se actualiza para mostrar el nuevo contenido y se puede volver al tile por defecto sólo a través de una nueva actualización.

A su vez, los tamaños de los tiles pueden ser: pequeño, mediano, ancho y grande, siendo este último opcional. En la siguiente tabla podemos ver los tamaños de sus imágenes junto a un % de escalado, que van a permitir la adaptación de las mismas a los distintos tamaños de pantalla.

**Tabla 15.- Tamaños y escalado de imágenes/logos para tiles, en píxeles**

| Nombre         | 400%     | 200%    | 100%    | 150%    | 125%    |   |
| -------------- | -------- | ------- | ------- | ------- | ------- | - |
| Square 71x71   | 284      | 142     | 71      | 107     | 89      |   |
| Square 150x150 | 600      | 300     | 150     | 225     | 188     |   |
| Wide 310x150   | 1240x600 | 630x300 | 310x150 | 465x225 | 388x188 |   |
| Square 310x310 | 1240     | 620     | 310     | 465     | 388     |   |
| Square 44x44   | 176(\*)  | 88(\*)  | 44(\*)  | 66(\*)  | 55(\*)  |   |
| Store          | 200      | 100     | 75      | 63      | 50      |   |

Recordemos, que Windows puede escalar automáticamente una imagen y adaptarla a las distintas pantallas. En caso de no disponer de todas ellas, usa la de mayor escalado. Y, en cualquier caso, se recomienda que exista una imagen para cada uno de estos tamaños, donde sus nombres se conforman con la siguiente nomenclatura:

*\<Nombre de la imagen>.scale-<%scalado>.\<png | jpg | jpeg>*

{% hint style="info" %}
**Nota**: Si queremos que un Tile tenga el mismo color de fondo que el tema de la interfaz de usuario su fondo tiene que ser transparente y el icono de primer plano blanco.
{% endhint %}

Los Tiles dinámicos están basados en plantillas de información que incluyen texto e imágenes que pueden mostrarse de manera independiente. Cuentan también con un área para la visualización de un contador (*o badge*) y proporcionan diferentes tamaños y formatos de texto, imágenes y contadores. Todas ellas incluidas en el *namespace* “Windows.UI.Notifications.TileTemplateType” y pueden ser obtenidas mediante código utilizando la siguiente instrucción:

```csharp
TileUpdateManager.GetTemplateContent(TileTemplateType. TileSquare150x150PeekImageAndText01)
```

Donde para este ejemplo, la plantilla es la siguiente:

```xml
<tile>
    <visual version="2">
        <binding template="TileSquare150x150PeekImageAndText01" fallback="TileSquarePeekImageAndText01">
            <image id="1" src=" "/>
            <text id="1"></text>
            <text id="2"></text>
            <text id="3"></text>
            <text id="4"></text>
        </binding>
    </visual>
</tile>
```

Y su esquema, que es el mismo para todas, consta de los siguientes elementos:

**Tabla 16.- Esquema de plantillas para Tiles**

| Elemento | Descripción                                                                                           |
| -------- | ----------------------------------------------------------------------------------------------------- |
| tile     | <blockquote><p>Elemento principal del Tile que contiene un elemento “visual”.</p></blockquote>        |
| visual   | Puede contener múltiples elementos “binding”, cada uno de cuales define un tile.                      |
| binding  | Define la plantilla del tile.                                                                         |
| text     | Texto usado en la plantilla de tile                                                                   |
| image    | Imagen usada en la plantilla de tile. Debe tener un tamaño conforme a los requisitos de la plantilla. |

A partir de estas plantillas, los tiles son actualizados de acuerdo a la información que se quiera mostrar. Dicha actualización suele ser realizada por una tarea en segundo plano (ver sección “15.- Tareas en segundo plano”) o bien, configurándolo en el manifiesto de la aplicación tal y como ilustra la siguiente figura:

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-a57642fea6519e19368bc823a956952279df0fb3%2Fimage55.png?alt=media)

**Figura 36.- Configuración de actualización periódica del tile en el manifiesto de la aplicación**

En este caso, el valor de la propiedad “URI Template” contiene la URL de un servicio o página web que retorna exactamente una plantilla rellena con la información a mostrar en el tile, es decir, un XML como el del siguiente de ejemplo:

```xml
<?xml version="1.0"?>
<tile>
    <visual version="2">
        <binding fallback="TileWidePeekImage01" template="TileWide310x150PeekImage01">
            <image alt="alt text" src="http://UpdateTilesWeb.azurewebsites.net/images/Taskin.jpg" id="1"/>
            <text id="1">Tareas</text>
            <text id="2">Completar Capítulo 2</text>
        </binding>
    </visual>
</tile>
```

De manera predeterminada, un tile muestra el contenido de una sola notificación hasta que es reemplazada por una nueva notificación. Sin embargo, podemos hacer que un Tile muestre hasta **cinco** notificaciones y que éste las recorra cíclicamente, lo que se consigue gracias a la **cola de notificaciones**.

La cola de notificaciones puede usarse con todos los tipos de envío de notificaciones: locales, programadas, periódicas o de inserción. Veremos más adelante, en el apartado “Actualización de notificaciones”, cada una de estas.

De manera predeterminada, si la cola ha alcanzado su capacidad, la nueva notificación reemplazará a la más antigua de la cola. No obstante, si se establecen **etiquetas (o&#x20;*****tags*****)** en las notificaciones, puede afectar a la directiva de reemplazo.

Una etiqueta es una cadena de no más de 16 caracteres que identifican unívocamente a una notificación dentro de su aplicación. El sistema examina la etiqueta de una notificación entrante, busca en la cola una que tenga una etiqueta con el mismo valor y, si la encuentra, la reemplaza. En caso contrario, se aplica la regla predeterminada de primero en entrar, primero en salir (FIFO).

La siguiente instrucción de código habilita la cola de notificaciones para los Tiles de tamaño medio/ancho/grande.

```csharp
TileUpdateManager
    .CreateTileUpdaterForApplication()
    .EnableNotificationQueue(true);
```

{% hint style="info" %}
**Nota**: Elige si habilitas o deshabilitas la cola de notificaciones y decide si la eliges o no como parte del diseño de la aplicación para evitar comportamientos confusos del Tile.
{% endhint %}

**Badges**

Son números o contadores mostrados en los Tiles que transmiten información de estado o resúmenes de la aplicación. Estas notificaciones pueden ser numéricas (1-99) o bien formar parte de un conjunto de glifos o insignias proporcionados por el sistema. Puede verse el detalle de estos glifos en la tabla 08, de la sección “8.2 Pantalla de bloqueo” de este mismo capítulo.

**Toast**

Mensajes mostrados al usuario durante unos segundos y que, al ser pulsados le redirigen a la aplicación que lo presenta. Aparecen en la parte superior de la pantalla en dispositivos móviles y en la parte inferior derecha, en tabletas o escritorio.

La principal característica es que pueden aparecer cuando la aplicación se encuentra en segundo plano (*background*) y no interfieren al usuario, pero sí, les mantienen al tanto de lo que ocurre en cualquier otra aplicación o parte del sistema.

Al igual que para los Tiles, para las notificaciones Toast también existe un catálogo de plantillas, pero, con la peculiaridad de que no permiten definir iconos. En su lugar, se utiliza por el icono predeterminado “Square150x150 Logo”, que se encuentra incluido en el manifiesto de la aplicación.

**Raw**

Se trata de notificaciones breves sin un formato específico y de carácter general no visibles para el usuario. Son enviadas a la aplicación mediante un tipo de notificación ***Push*** usando un servicio de notificaciones WNS (Servicio de notificaciones de Windows). Pueden ser capturadas mediante una tarea en segundo plano de tipo “Trigger” permitiendo su activación una vez recibida la notificación. Al usar WNS, se evita la carga de procesamiento que se produce cuando se generan conexiones de *sockets* persistentes.

#### Actualización de notificaciones

Existen diferentes alternativas para la actualización de notificaciones y, dependiendo de las necesidades utilizaremos unas u otras.

* **Local**. Inmediatamente mientras la aplicación está en ejecución o mediante una tarea en segundo plano.

```csharp
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
tileUpdater.Update(tileNotificaton);
```

* **Programada**. Una sola vez a un día y hora determinados.

```csharp
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
tileUpdater.AddToSchedule(scheduledTileNotification)
```

* **Periódica**. Cada cierto intervalo de tiempo: Media hora, una hora, seis horas, doce horas o, diariamente.

```csharp
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
tileUpdater.StartPeriodicUpdate(uriTileContent, periodicUpdateRecurrence)
```

* **Push**. Envío de notificaciones Tile, Badge, Toast o Raw que activan una tarea en segundo plano encargada de realizar la actualización. Comúnmente realizadas desde un servicio de notificaciones Push, por ejemplo, utilizando el componente de Azure: “Azure Notification Hub”.

```csharp
var channelOp =
    await PushNotificationChannelManager
        .CreatePushNotificationChannelForApplicationAsync(tileId);
channelOp.PushNotificationReceived +=
    (PushNotificationChannel sender,
        PushNotificationReceivedEventArgs e) => {
    switch (e.NotificationType)
    {
        case PushNotificationType.Tile:
        {
            var tileNotificaton = e.TileNotification;
            break;
        }
        case PushNotificationType.Badge:
        {
            var badgeNotification = e.BadgeNotification;
            break;
        }
        case PushNotificationType.Toast:
        {
            var toastNotification = e.ToastNotification;
            break;
        }
        case PushNotificationType.Raw:
        {
            var rawNotification = e.RawNotification;
            break;
        }
    }};
```

De la misma manera que los trozos de código anteriores ejemplifican la actualización de tiles, mediante ***TileUpdateManager***, también es posible la actualización del resto de notificaciones mediante ***BadgeUpdateManager*** y ***ToastNotificationManager***. La siguiente tabla resume las distintas alternativas según cada notificación:

**Tabla 17.- Alternativas para la actualización de notificaciones**

| Tipo de notificación | Programada | Local | Periódica | Push |
| -------------------- | ---------- | ----- | --------- | ---- |
| Tile                 | X          | X     | X         | X    |
| Badge                |            | X     | X         | X    |
| Toast                | X          | X     |           | X    |
| Raw                  |            |       |           | X    |

Para que las actualizaciones automáticas tengan lugar a través de un servicio *Push* o mediante la opción *Tile Update*, la capacidad ***Internet (Client)*** ha de estar activada en el manifiesto de la aplicación.

Todas las notificaciones expiran al cabo de 3 días, a excepción de las actualizadas localmente.
