Adicionar notificações por push ao seu aplicativo do Windows

  • Artigo

Visão geral

Neste tutorial, você adicionará notificações por push ao projeto de Início rápido do Windows de forma que sempre que um registro for inserido, uma notificação por push seja enviada.

Se você não usar o projeto baixado do início rápido do servidor, deve adicionar o pacote de extensão de notificação por push ao seu projeto. Confira Trabalhar com o servidor back-end SDK do .NET para os Aplicativos Móveis do Azure para obter mais informações.

Configurar um Hub de Notificação

O recurso Aplicativos Móveis do Serviço de Aplicativo do Azure usa Hubs de Notificação para enviar por push e, portanto, você deve configurar um hub de notificação para seu aplicativo móvel.

  1. No Portal do Azure, vá para Serviços de Aplicativos e, em seguida, selecione o back-end do aplicativo. Em Configurações, selecione Push.

  2. Para adicionar um recurso do hub de notificação ao aplicativo, selecione Conectar. Você pode criar um hub ou conectar-se a um existente.

    Configurar um hub

Agora você se conectou a um hub de notificação para o projeto de back-end dos Aplicativos Móveis. Posteriormente, você configura esse hub de notificação para conectar um PNS (Sistema de Notificação de Plataforma) a fim de enviar por push para dispositivos.

Registrar seu aplicativo para notificações por push

Você precisa enviar seu aplicativo para a Microsoft Store e, em seguida, configurar seu projeto de servidor para integrar com o WNS (Serviços de Notificação por Push) do Windows para enviar push.

  1. No Visual Studio Gerenciador de Soluções, clique com o botão direito do mouse no projeto do aplicativo UWP, clique em Store>Associate App with the Store....

    Associar aplicativo à Microsoft Store

  2. No assistente, clique em Avançar, entre com sua conta da Microsoft, digite um nome para seu aplicativo em Reservar um novo nome de aplicativo e clique em Reservar.

  3. Depois que o registro do aplicativo for criado com êxito, selecione o novo nome do aplicativo, clique em Avançar e em Associar. Isso adiciona as informações de registro necessárias da Microsoft Store ao manifesto do aplicativo.

  4. Navegue até o Portal de Registro de Aplicativos e entre com sua conta da Microsoft. Clique no aplicativo da Windows Store associadas na etapa anterior.

  5. Na página de registro, anote o valor em Segredos do aplicativo e SID do pacote, que, em seguida, você usará para configurar o back-end do seu aplicativo móvel.

    Associar aplicativo à Microsoft Store

    Importante

    O segredo do cliente e o SID do pacote são credenciais de segurança importantes. Não compartilhe esses valores com ninguém nem os distribua com seu aplicativo. A ID do aplicativo é usada com o segredo para configurar a autenticação da conta da Microsoft.

App Center também tem instruções sobre como configurar aplicativos da UWP para notificações por push.

Configurar o back-end para enviar notificações por push

  1. No Portal do Azure, selecione Procurar todos os>Serviços de Aplicativos. Em seguida, selecione o back-end dos Aplicativos Móveis. Em Configurações, selecione Push do Serviço de Aplicativo. Em seguida, selecione o nome do hub de notificação.

  2. Vá para Windows (WNS). Em seguida, insira a Chave de segurança (segredo do cliente) e o SID do Pacote que você obteve do site dos Live Services. Em seguida, selecione Salvar.

    Definir a chave WNS no portal

O back-end agora está configurado para usar o WNS a fim de enviar notificações por push.

Atualizar o servidor para enviar notificações por push

Use o procedimento abaixo que corresponde ao tipo de projeto de back-end — back-end do .NET ou Node.js back-end.

Projeto de back-end do .NET

  1. No Visual Studio, clique com o botão direito do mouse no projeto do servidor e clique em Gerenciar Pacotes NuGet, pesquise por Microsoft.Azure.NotificationHubs e então clique em Instalar. Isso instala a biblioteca de cliente de Hubs de notificação.

  2. Expanda Controladores, abra TodoItemController.cs e adicione os elementos a seguir usando instruções:

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

  3. No método PostTodoItem, adicione o seguinte código após a chamada para 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");
}

    Esse código informa o hub de notificação para enviar uma notificação por push após uma inserção de item nova.

  4. Republicar o projeto de servidor.

Node.js projeto de back-end

  1. Configure seu projeto de back-end.

  2. Substitua o código existente no arquivo todoitem.js pelo código a seguir:

    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;

    Isso envia uma notificação WNS que contém o item.text quando um novo item todo é inserido.

  3. Ao editar o arquivo no seu computador local, republique o projeto do servidor.

Adicionar notificações de push para seu aplicativo

Em seguida, seu aplicativo deve se registrar para notificações por push na inicialização. Quando você já tiver habilitado a autenticação, certifique-se de que o usuário entre antes de tentar se registrar para receber notificações por push.

  1. Abra o arquivo de projeto App.xaml.cs e adicione as instruções using a seguir:

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

  2. No mesmo arquivo, adicione a seguinte definição de método InitNotificationsAsync à classe de aplicativo:

    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);
}

    Esse código recupera o ChannelURI do aplicativo de WNS e registra esse ChannelURI com seu Aplicativo Móvel do Serviço de Aplicativo.

  3. Na parte superior do manipulador de eventos OnLaunched no App.xaml.cs, adicione o modificador async à definição do método e adicione a seguinte chamada ao novo método InitNotificationsAsync, como mostrado no seguinte exemplo:

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

    // ...
}

    Isso garante que o ChannelURI de curta duração seja registrado sempre que o aplicativo for iniciado.

  4. Recompile seu projeto de aplicativo da UWP. Seu aplicativo agora está pronto para receber notificações do sistema.

Testar notificações por push no seu aplicativo

  1. Clique com o botão direito do mouse no projeto do Windows Store, clique em Definir como Projeto de Inicializaçãoe pressione a tecla F5 para executar o aplicativo do Windows Store.

    Depois que o aplicativo é iniciado, o dispositivo está registrado para notificações por push.

  2. Pare o aplicativo da Windows Store e repita a etapa anterior para o aplicativo Loja do Windows Phone.

    Nesse ponto, ambos os dispositivos são registrados para receber as notificações por push.

  3. Execute o aplicativo do Windows Store novamente, digite o texto em Inserir um TodoItem e clique em Salvar.

    Observe que, após a inserção, tanto os aplicativos do Windows Store como do Windows Phone recebem uma notificação por push dos WNS. A notificação é exibida no Windows Phone, mesmo quando o aplicativo não está em execução.

Próximas etapas

Saiba mais sobre as notificações por push:

Considere a possibilidade de prosseguir com um dos seguintes tutoriais: