Tutorial: Enviar notificações por push localizadas para aplicativos do Windows usando os Hubs de Notificação do Azure

Visão geral

Este tutorial mostra como enviar notificações localizadas por push para dispositivos móveis registrados no serviço Hubs de Notificação. No tutorial, você atualiza os aplicativos criados no Tutorial: Enviar notificações para dispositivos específicos (Plataforma Universal do Windows) para oferecer suporte aos seguintes cenários:

• A aplicação da Loja Windows permite que os dispositivos cliente especifiquem um idioma e subscrevam diferentes categorias de últimas notícias.
• O aplicativo back-end transmite notificações, usando os recursos de tag e modelo dos Azure Notification Hubs.

Ao concluir o tutorial, o aplicativo móvel permite que você se registre nas categorias em que está interessado e também especifique um idioma no qual receber as notificações. O aplicativo de back-end envia notificações localizadas por idioma e dispositivo.

Neste tutorial, você aprenderá a:

Pré-requisitos

Conclua o Tutorial: Enviar notificações para dispositivos específicos (Plataforma Universal do Windows).

No Tutorial: Enviar notificações para dispositivos específicos (Plataforma Universal do Windows), você criou um aplicativo que usava tags para assinar notificações para diferentes categorias de notícias. Neste tutorial, você usa o recurso de modelo dos Hubs de Notificação para entregar facilmente notificações de últimas notícias localizadas .

Em um alto nível, os modelos são uma maneira de especificar o formato no qual um dispositivo específico deve receber uma notificação. O modelo especifica o formato exato de carga fazendo referência às propriedades que fazem parte da mensagem enviada pelo back-end do aplicativo. Neste tutorial, o aplicativo back-end envia uma mensagem independente de localidade contendo todos os idiomas suportados:

{
    "News_English": "...",
    "News_French": "...",
    "News_Mandarin": "..."
}

Os dispositivos registam-se através de um modelo que se refere à propriedade correta. Por exemplo, uma aplicação da Windows Store que deseja receber uma notificação toast em inglês regista-se no seguinte modelo com quaisquer tags correspondentes:

<toast>
    <visual>
    <binding template=\"ToastText01\">
        <text id=\"1\">$(News_English)</text>
    </binding>
    </visual>
</toast>

Para saber mais sobre modelos, consulte Push Templates.

Atualizar o aplicativo do Windows para oferecer suporte a informações de localidade

1. Abra a solução Visual Studio que você criou para o Tutorial: Enviar notificações para dispositivos específicos (Plataforma Universal do Windows).

2. Atualize o arquivo da MainPage.xaml solução para incluir uma caixa de seleção de localidade:

   <Grid Margin="120, 58, 120, 80"  
           Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
       <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition />
           <RowDefinition />
           <RowDefinition />
           <RowDefinition />
           <RowDefinition />
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
           <ColumnDefinition />
           <ColumnDefinition />
       </Grid.ColumnDefinitions>
       <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  TextWrapping="Wrap" Text="Breaking News" FontSize="42" VerticalAlignment="Top"/>
       <ComboBox Name="Locale" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Grid.Row="1" Grid.Column="0">
           <x:String>English</x:String>
           <x:String>French</x:String>
           <x:String>Mandarin</x:String>
       </ComboBox>
       <ToggleSwitch Header="World" Name="WorldToggle" Grid.Row="2" Grid.Column="0"/>
       <ToggleSwitch Header="Politics" Name="PoliticsToggle" Grid.Row="3" Grid.Column="0"/>
       <ToggleSwitch Header="Business" Name="BusinessToggle" Grid.Row="4" Grid.Column="0"/>
       <ToggleSwitch Header="Technology" Name="TechnologyToggle" Grid.Row="2" Grid.Column="1"/>
       <ToggleSwitch Header="Science" Name="ScienceToggle" Grid.Row="3" Grid.Column="1"/>
       <ToggleSwitch Header="Sports" Name="SportsToggle" Grid.Row="4" Grid.Column="1"/>
       <Button Content="Subscribe" HorizontalAlignment="Center" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="SubscribeButton_Click" />
   </Grid>
   

3. Na Notifications classe, adicione um parâmetro locale aos métodos StoreCategoriesAndSubscribe e SubscribeToCategories.

   public async Task<Registration> StoreCategoriesAndSubscribe(string locale, IEnumerable<string> categories)
   {
       ApplicationData.Current.LocalSettings.Values["categories"] = string.Join(",", categories);
       ApplicationData.Current.LocalSettings.Values["locale"] = locale;
       return await SubscribeToCategories(locale, categories);
   }
   
   public async Task<Registration> SubscribeToCategories(string locale, IEnumerable<string> categories = null)
   {
       var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
   
       if (categories == null)
       {
           categories = RetrieveCategories();
       }
   
       // Using a template registration. This makes supporting notifications across other platforms much easier.
       // Using the localized tags based on locale selected.
       string templateBodyWNS = String.Format("<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(News_{0})</text></binding></visual></toast>", locale);
   
       return await hub.RegisterTemplateAsync(channel.Uri, templateBodyWNS, "localizedWNSTemplateExample", categories);
   }
   

   Em vez de chamar o método RegisterNativeAsync, chame RegisterTemplateAsync. Você registra um formato de notificação específico no qual o modelo depende da localidade. Você também fornece um nome para o modelo ("localizedWNSTemplateExample"), porque talvez queira registrar mais de um modelo (por exemplo, um para notificações interativas e outro para azulejos). Você também precisa nomeá-los para atualizá-los ou excluí-los.

   Se um dispositivo registrar vários modelos com a mesma tag, uma mensagem de entrada direcionada a essa tag resultará em várias notificações entregues ao dispositivo (uma para cada modelo). Esse comportamento é útil quando a mesma mensagem lógica precisa resultar em várias notificações visuais, por exemplo, mostrando tanto um emblema quanto uma notificação popup numa aplicação da Windows Store.

4. Adicione o seguinte método para recuperar a localidade armazenada:

   public string RetrieveLocale()
   {
       var locale = (string) ApplicationData.Current.LocalSettings.Values["locale"];
       return locale != null ? locale : "English";
   }
   

5. MainPage.xaml.cs No arquivo, atualize o manipulador de clique de botão para recuperar o valor atual da caixa de combinação Locale e fornecê-lo à chamada para a Notifications classe:

   private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
   {
       var locale = (string)Locale.SelectedItem;
   
       var categories = new HashSet<string>();
       if (WorldToggle.IsOn) categories.Add("World");
       if (PoliticsToggle.IsOn) categories.Add("Politics");
       if (BusinessToggle.IsOn) categories.Add("Business");
       if (TechnologyToggle.IsOn) categories.Add("Technology");
       if (ScienceToggle.IsOn) categories.Add("Science");
       if (SportsToggle.IsOn) categories.Add("Sports");
   
       var result = await ((App)Application.Current).notifications.StoreCategoriesAndSubscribe(locale,
               categories);
   
       var dialog = new MessageDialog("Locale: " + locale + " Subscribed to: " + 
           string.Join(",", categories) + " on registration Id: " + result.RegistrationId);
       dialog.Commands.Add(new UICommand("OK"));
       await dialog.ShowAsync();
   }
   

6. Finalmente, no ficheiro App.xaml.cs, atualize o método InitNotificationsAsync para recuperar a localidade e usá-la ao subscrever:

   private async void InitNotificationsAsync()
   {
       var result = await notifications.SubscribeToCategories(notifications.RetrieveLocale());
   
       // Displays the registration ID so you know it was successful
       if (result.RegistrationId != null)
       {
           var dialog = new MessageDialog("Registration successful: " + result.RegistrationId);
           dialog.Commands.Add(new UICommand("OK"));
           await dialog.ShowAsync();
       }
   }
   

Executar o aplicativo UWP

1. Execute o aplicativo da Plataforma Universal do Windows. Aguarde até ver a mensagem Registo bem-sucedido .

   

2. Selecione as categorias e a localidade e clique em Inscrever-se. O aplicativo converte as categorias selecionadas em tags e solicita um novo registro de dispositivo para as tags selecionadas no hub de notificação.

   

3. Você verá uma mensagem de confirmação sobre as assinaturas.

   

Atualizar aplicativo de console para enviar notificações localizadas

Quando você envia notificações de modelo, você só precisa fornecer um conjunto de propriedades, neste tutorial, o aplicativo de back-end envia o conjunto de propriedades contendo a versão localizada das notícias atuais, por exemplo:

{
    "News_English": "World News in English!",
    "News_French": "World News in French!",
    "News_Mandarin": "World News in Mandarin!"
}

Nesta seção, você atualiza o projeto de aplicativo de console na solução. Modifique o método SendTemplateNotificationAsync no aplicativo de console que você criou anteriormente com o seguinte código:

private static async void SendTemplateNotificationAsync()
{
    // Define the notification hub.
    NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString(
        "<connection string with full access>", "<hub name>");

    // Sending the notification as a template notification. All template registrations that contain
    // "messageParam" or "News_<local selected>" and the proper tags will receive the notifications.
    // This includes APNS, FCM, WNS, and MPNS template registrations.
    Dictionary<string, string> templateParams = new Dictionary<string, string>();

    // Create an array of breaking news categories.
    var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    var locales = new string[] { "English", "French", "Mandarin" };

    foreach (var category in categories)
    {
        templateParams["messageParam"] = "Breaking " + category + " News!";

        // Sending localized News for each tag too...
        foreach( var locale in locales)
        {
            string key = "News_" + locale;

            // Your real localized news content would go here.
            templateParams[key] = "Breaking " + category + " News in " + locale + "!";
        }

        await hub.SendTemplateNotificationAsync(templateParams, category);
    }
}

Esta chamada simples fornece a notícia local para todos os dispositivos, independentemente da plataforma, enquanto o seu Hub de Notificação cria e entrega o payload nativo correto para todos os dispositivos inscritos numa tag específica.

Executar o aplicativo de console para enviar notificações localizadas

Execute o aplicativo de console para enviar notificações para cada categoria e em cada idioma suportado. Verifique se você recebe apenas uma notificação para as categorias que você se inscreveu e se a mensagem é para a localidade selecionada.

Próximos passos

Neste tutorial, você aprendeu como enviar notificações localizadas por push para dispositivos específicos que têm tags associadas aos seus registros. Para saber como enviar notificações por push para usuários específicos que podem estar usando mais de um dispositivo, avance para o seguinte tutorial: