Incorporación de notificaciones push a la aplicación de Windows

  • Artículo

Información general

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

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

Configurar un centro de notificaciones

La característica Mobile Apps de Azure App Service usa Azure Notification Hubs para enviar notificaciones push; por lo tanto, necesita un centro de notificaciones para su aplicación móvil.

  1. En Azure Portal, vaya a App Services y seleccione el back-end de la aplicación. En Configuración, seleccione Insertar.

  2. Seleccione Conectar para agregar un recurso de Centro de notificaciones a la aplicación. Puede crear un centro o conectarse a uno existente.

    Configurar un centro

Ya ha conectado un centro de notificaciones al proyecto de back-end de Mobile Apps. Más adelante configure este centro de notificaciones para que se conecte a un sistema de notificación de plataforma (PNS) que envíe notificaciones push a los dispositivos.

Registro de la aplicación para notificaciones push

Debe enviar la aplicación a Microsoft Store y, a continuación, configurar el proyecto de servidor para que se integre con Los Servicios de notificaciones push de Windows (WNS) para enviar inserción.

  1. En Visual Studio Explorador de soluciones, haga clic con el botón derecho en el proyecto de aplicación para UWP, haga clic en Asociar>aplicación a la Tienda....

    Asociar la aplicación a Microsoft Store

  2. En el asistente, haga clic en Siguiente, inicie sesión con su cuenta Microsoft, escriba un nombre para la aplicación en Reserve un nuevo nombre de aplicación y haga clic en Reservar.

  3. Después de crear correctamente el registro de la aplicación, seleccione el nuevo nombre de la aplicación, haga clic en Siguiente y, después, en Asociar. Se agrega la información de registro necesaria de Microsoft Store al manifiesto de aplicación.

  4. Vaya a Application Registration Portal (portal de registro de aplicaciones de Microsoft) e inicie sesión con las credenciales de su cuenta Microsoft. Haga clic en la aplicación de la Tienda Windows que asoció en el paso anterior.

  5. En la página de registro, anote los valores de Secretos de aplicación y SID del paquete, que va a utilizar a continuación para configurar el back-end de aplicación móvil.

    Asociar la aplicación a Microsoft Store

    Importante

    El secreto de cliente y el SID del paquete son credenciales de seguridad importantes. No los comparta con nadie ni los distribuya con su aplicación. El Id. de aplicación se usa con el secreto para configurar la autenticación de la cuenta de Microsoft.

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

Configuración del back-end para enviar notificaciones push

  1. En Azure Portal, seleccione Examinar todo>App Services. 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.

  2. Vaya a Windows (WNS). Escriba la Clave de seguridad (secreto de cliente) y el SID del paquete que ha obtenido en el sitio de Servicios Live. Luego, seleccione Guardar.

    Establecimiento de la clave de WNS en el portal

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

Actualización del servidor para enviar notificaciones de inserción

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

Proyecto back-end de .NET

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

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

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

  3. 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 la inserción de un elemento nuevo.

  4. Vuelva a publicar el proyecto de servidor.

proyecto back-end de Node.js

  1. Configure el proyecto de back-end.

  2. 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;

    Esta acción envía una notificación del sistema de WNS que contiene el item.text cuando se inserta un nuevo elemento todo.

  3. Cuando edite el archivo en el equipo local, vuelva a publicar el proyecto de servidor.

Incorporación de notificaciones de inserción a la aplicación

Después, debe registrarse la aplicación para recibir notificaciones push en el inicio. Cuando tenga habilitada la autenticación, asegúrese de que el usuario inicia sesión antes de intentar registrarse para recibir notificaciones push.

  1. Abra el archivo de proyecto App.xaml.cs y agregue las siguientes using instrucciones:

    using System.Threading.Tasks;
using Windows.Networking.PushNotifications;

  2. En el mismo archivo, agregue la siguiente definición del 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 valor de ChannelURI de la aplicación desde WNS y, a continuación, lo registra con sus Aplicaciones móviles de App Service.

  3. En la parte superior del controlador de eventos OnLaunched, en App.xaml.cs, agregue el modificador async a la definición del método y agregue la siguiente llamada al nuevo método InitNotificationsAsync, como se muestra en el siguiente ejemplo:

    protected async override void OnLaunched(LaunchActivatedEventArgs e)
{
    await InitNotificationsAsync();

    // ...
}

    Esto garantiza que el valor de ChannelURI de corta duración se registra cada vez que se inicia la aplicación.

  4. Recompile el proyecto de aplicación para UWP. La carpeta ahora ya está lista para recibir notificaciones.

Prueba de las notificaciones push en su aplicación

  1. Haga clic con el botón derecho en el proyecto de la Tienda Windows, haga clic en Establecer como proyecto de inicioy luego presione la tecla F5 para ejecutar la aplicación de la Tienda Windows.

    Cuando la aplicación se inicia, el dispositivo se registra para recibir notificaciones push.

  2. Detenga la aplicación de la Tienda Windows y repita el paso anterior para ejecutar la aplicación de la Tienda de Windows Phone.

    En este momento, ambos dispositivos están registrados para recibir notificaciones push.

  3. Vuelva a ejecutar la aplicación de la Tienda Windows, escriba texto en Insertar un TodoItem y haga clic en Guardar.

    Después de hacer esto, las aplicaciones de la Tienda Windows y de Windows Phone recibirán una notificación push de WNS. La notificación se muestra en Windows Phone aunque la aplicación no se esté ejecutando.

Pasos siguientes

Más información sobre las notificaciones de inserción:

También podría continuar con uno de los siguientes tutoriales: