Agregar notificaciones push a la aplicación de Windows

2019-06-25

Información general

En este tutorial, agregará notificaciones push al proyecto de inicio rápido de Windows para que se envíe una notificación push al dispositivo cada vez que se inserte un registro.

Si no usa el proyecto de servidor de inicio rápido descargado, necesitará el paquete de extensión de notificación push. Consulte Trabajar con el SDK del servidor back-end de .NET para Azure Mobile Apps para más información.

Configuración de un centro de notificaciones

La característica Mobile Apps de Azure App Service usa Azure Notification Hubs para enviar notificaciones push, de modo que configurarás un hub de notificaciones para tu aplicación móvil.

En Azure Portal, vaya a App Services y seleccione el back-end de la aplicación. En Configuración, seleccione Push.
Para agregar un recurso del centro de notificaciones a la aplicación, seleccione Conectar. Puede crear un centro o conectarse a uno existente.

Ahora ha conectado un centro de notificaciones al proyecto de back-end de Mobile Apps. Más adelante, configure este centro de notificaciones para conectarse a un sistema de notificaciones de plataforma (PNS) para insertar en los dispositivos.

Registro de la aplicación para notificaciones push

Debes enviar tu aplicación a Microsoft Store y, a continuación, configurar el proyecto para que se integre con los Servicios de Notificaciones Push de Windows (WNS) para enviar notificaciones push.

En el Explorador de soluciones de Visual Studio, haz clic con el botón derecho en el proyecto de aplicación para UWP, haz clic enAsociar aplicación a la Tienda>....
En el asistente, haga clic en Siguiente, inicie sesión con su cuenta Microsoft, escriba un nombre para la aplicación en Reservar un nuevo nombre de aplicación y, a continuación, haga clic en Reservar.
Una vez creado correctamente el registro de la aplicación, seleccione el nuevo nombre de la aplicación, haga clic en Siguiente y, a continuación, haga clic en Asociar. Esto agrega la información de registro necesaria de Microsoft Store al manifiesto de aplicación.
Vaya al Portal de registro de aplicaciones e inicie sesión con su cuenta Microsoft. Haga clic en la aplicación de la Tienda Windows asociada en el paso anterior.
En la página de registro, anote el valor en Secretos de aplicación y el SID del paquete, que usará a continuación para configurar el back-end de la aplicación móvil.

Importante

El secreto de cliente y el SID del paquete son credenciales de seguridad importantes. No comparta estos valores con nadie ni distribúyalos con la aplicación. El identificador de aplicación se usa con el secreto para configurar la autenticación de la cuenta Microsoft.

App Center también tiene instrucciones para configurar aplicaciones para UWP para notificaciones push.

Configuración del back-end para enviar notificaciones push

En Azure Portal, seleccione Examinar todos los>servicios de aplicaciones. A continuación, seleccione el back-end de Mobile Apps. En Configuración, seleccione App Service Push. A continuación, seleccione el nombre del centro de notificaciones.
Ir a Windows (WNS) A continuación, escriba la clave de seguridad (secreto de cliente) y el SID de paquete que obtuvo del sitio de Live Services. A continuación, seleccione Guardar.

El back-end ahora está configurado para usar WNS para enviar notificaciones push.

Actualización del servidor para enviar notificaciones push

Use el procedimiento siguiente que coincida con el tipo de proyecto de back-end, ya sea back-end de .NET o Node.js back-end.

Proyecto back-end de .NET

En Visual Studio, haga clic con el botón derecho en el proyecto de servidor y haga clic en Administrar paquetes NuGet, busque Microsoft.Azure.NotificationHubs y, a continuación, haga clic en Instalar. Esto instala la biblioteca cliente de Notification Hubs.

Expanda Controladores, abra TodoItemController.cs y agregue las siguientes instrucciones de 'using':

using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;

En el método PostTodoItem , agregue el código siguiente después de la llamada a InsertAsync:

// Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the Mobile App.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create the notification hub client.
NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Define a WNS payload
var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
                        + item.Text + @"</text></binding></visual></toast>";
try
{
    // Send the push notification.
    var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

Este código indica al centro de notificaciones que envíe una notificación push después de insertar un nuevo elemento.

Republíque el proyecto del servidor.

proyecto de back-end de Node.js

Configure el proyecto de back-end.

Reemplace el código existente en el archivo todoitem.js por lo siguiente:

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs
logger.info('Running TodoItem.insert');

// Define the WNS payload that contains the new item Text.
var payload = "<toast><visual><binding template=\ToastText01\><text id=\"1\">"
                            + context.item.text + "</text></binding></visual></toast>";

// Execute the insert.  The insert returns the results as a Promise,
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured
        if (context.push) {
            // Send a WNS native toast notification.
            context.push.wns.sendToast(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute()
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

Esto envía una notificación de sistema WNS que contiene el texto del elemento cuando se añade un nuevo elemento.

Al editar el archivo en el equipo local, vuelva a publicar el proyecto de servidor.

Incorporación de notificaciones push a la aplicación

A continuación, la aplicación debe registrarse para recibir notificaciones push en el inicio. Cuando ya haya habilitado la autenticación, asegúrese de que el usuario inicia sesión antes de intentar registrarse para recibir notificaciones push.

Abra el archivo de proyecto App.xaml.cs y agregue las siguientes using instrucciones:
```
using System.Threading.Tasks;
using Windows.Networking.PushNotifications;
```

En el mismo archivo, agregue la siguiente definición de método InitNotificationsAsync a la clase App :

private async Task InitNotificationsAsync()
{
    // Get a channel URI from WNS.
    var channel = await PushNotificationChannelManager
        .CreatePushNotificationChannelForApplicationAsync();

    // Register the channel URI with Notification Hubs.
    await App.MobileService.GetPush().RegisterAsync(channel.Uri);
}

Este código recupera el ChannelURI de la aplicación de WNS y, a continuación, registra ese ChannelURI con la aplicación móvil de App Service.

En la parte superior del controlador de eventos OnLaunched en App.xaml.cs, agregue el modificador asincrónico a la definición del método y agregue la siguiente llamada al nuevo método InitNotificationsAsync , como en el ejemplo siguiente:
```
protected async override void OnLaunched(LaunchActivatedEventArgs e)
{
    await InitNotificationsAsync();

    // ...
}
```
Esto garantiza que el ChannelURI de corta duración se registra cada vez que se inicia la aplicación.
Recompile el proyecto de aplicación para UWP. La aplicación ya está lista para recibir notificaciones emergentes.

Prueba de las notificaciones push en la aplicación

Haga clic con el botón derecho en el proyecto de la Tienda Windows, haga clic en Establecer como proyecto de inicio y, a continuación, presione la tecla F5 para ejecutar la aplicación de la Tienda Windows.

Una vez iniciada la aplicación, el dispositivo se registra para las notificaciones push.
Detenga la aplicación de la Tienda Windows y repita el paso anterior para la aplicación tienda de Windows Phone.

En este momento, ambos dispositivos están registrados para recibir notificaciones push.
Vuelva a ejecutar la aplicación de la Tienda Windows y escriba texto en Insertar un todoItem y, a continuación, haga clic en Guardar.

Tenga en cuenta que una vez completada la inserción, tanto la Tienda Windows como las aplicaciones de Windows Phone reciben una notificación push de WNS. La notificación se muestra en Windows Phone incluso cuando la aplicación no se está ejecutando.

Pasos siguientes

Más información sobre las notificaciones push:

Uso del cliente administrado para Azure Mobile Apps Las plantillas ofrecen flexibilidad para enviar notificaciones multiplataforma y notificaciones localizadas. Obtenga información sobre cómo registrar plantillas.
Diagnosticar problemas de notificaciones push Hay varias razones por las que las notificaciones pueden perderse o no llegar a los dispositivos. En este tema se muestra cómo analizar y averiguar la causa principal de los errores de notificación push.

Considere la posibilidad de continuar con uno de los siguientes tutoriales:

Adición de autenticación a la aplicación Obtenga información sobre cómo autenticar a los usuarios de la aplicación con un proveedor de identidades.
Habilitación de la sincronización sin conexión para la aplicación Obtenga información sobre cómo agregar compatibilidad sin conexión con la aplicación mediante un back-end de aplicación móvil. La sincronización sin conexión permite a los usuarios finales interactuar con una aplicación móvil (ver, agregar o modificar datos), incluso cuando no hay ninguna conexión de red.

Compartir a través de