Tutorial: Envío de notificaciones push localizadas a aplicaciones Windows mediante Azure Notification Hubs

Información general

En este tutorial se muestra cómo insertar notificaciones localizadas a dispositivos móviles registrados en el servicio Notification Hubs. En el tutorial, se actualizan las aplicaciones creadas en el tutorialEnvío de notificaciones a dispositivos específicos (Plataforma universal de Windows) para dar soporte a los escenarios siguientes:

• La aplicación de la Tienda Windows permite que los dispositivos cliente especifiquen un idioma y se suscriban a distintas categorías de noticias de última hora.
• La aplicación de back-end difunde las notificaciones mediante las características etiqueta y plantilla de Azure Notification Hubs.

Al completar el tutorial, la aplicación móvil le permite registrar las categorías que le interesen, así como especificar el idioma en el que va a recibir las notificaciones. La aplicación de back-end envía notificaciones que están localizadas por idioma y dispositivo.

En este tutorial, aprenderá a:

Requisitos previos

Complete el tutorial Envío de notificaciones a dispositivos concretos (Plataforma universal de Windows).

En el tutorial: Envío de notificaciones a dispositivos concretos (Plataforma universal de Windows), ha creado una aplicación que utilizaba etiquetas para suscribirse a notificaciones de noticias diferentes categorías . En este tema se usa la característica de plantilla de Notification Hubs para entregar fácilmente notificaciones de noticias de última hora localizadas.

A un alto nivel, las plantillas son una forma de especificar el formato en que un dispositivo específico debe recibir una notificación. La plantilla especifica el formato de carga exacto haciendo referencia a las propiedades que forman parte del mensaje enviado por el back-end de la aplicación. En este tutorial, la aplicación de back-end envía un mensaje independiente de la configuración regional que contiene todos los idiomas admitidos:

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

Esto garantizará que los dispositivos se registren con una plantilla que hace referencia a la propiedad correcta. Por ejemplo, una aplicación de la Tienda Windows que quiere recibir un simple mensaje del sistema en inglés se registra en la plantilla siguiente con las etiquetas correspondientes:

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

Para más información acerca de las plantillas, consulte el artículo sobre Plantillas push.

Actualización de una aplicación de Windows para que admita la información de configuración regional

1. Abra la solución de Visual Studio que creó para el tutorial Envío de notificaciones a dispositivos concretos (Plataforma universal de Windows).

2. Actualice el archivo MainPage.xaml para incluir un cuadro combinado de configuración regional:

   <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. En la clase Notifications, agregue un parámetro de configuración regional para los métodos StoreCategoriesAndSubscribe y 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);
   }
   

   En lugar de llamar al método RegisterNativeAsync, llame a RegisterTemplateAsync. Registre un formato de notificación específico en el que la plantilla dependa de la configuración regional. También puede especificar un nombre para la plantilla ("localizedWNSTemplateExample"), porque desea registrar más de una plantilla (por ejemplo, una para las notificaciones del sistema y otra para los iconos). También debe asignarle un nombre para actualizarla o eliminarla.

   Si un dispositivo registra varias plantillas con la misma etiqueta, el envío de un mensaje destinado a dicha etiqueta dará como resultado la entrega de varias notificaciones al dispositivo (una para cada plantilla). Este comportamiento resulta útil cuando un mismo mensaje lógico debe dar como resultado varias notificaciones visuales que muestren, por ejemplo, tanto un distintivo como una notificación del sistema en una aplicación de la Tienda Windows.

4. Agregue el método siguiente para recuperar la configuración regional almacenada:

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

5. En el archivo MainPage.xaml.cs, actualice el controlador de clic del botón para recuperar el valor actual del cuadro combinado de configuración regional y proporcionarlo a la llamada a la clase Notifications:

   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. Por último, en el archivo App.xaml.cs, actualice el método InitNotificationsAsync para recuperar la configuración regional y usarla al suscribirse:

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

Ejecución de la aplicación de UWP

1. Ejecute la aplicación Universal Windows Platform. Espere hasta que vea el mensaje Registration successful (Registro correcto).

   

2. Seleccione las categorías y la configuración regional, y haga clic en Subscribe (Suscribir). La aplicación convierte las categorías seleccionadas en etiquetas y solicita un nuevo registro de dispositivo para las etiquetas seleccionadas al Centro de notificaciones.

   

3. Se ve un mensaje de confirmación acerca de las suscripciones.

   

Actualización de una aplicación de consola para enviar notificaciones localizadas

Cuando se envían notificaciones de plantilla, solo es necesario especificar un conjunto de propiedades; en este tutorial, la aplicación de back-end envía el conjunto de propiedades que contiene la versión localizada de las noticias de actualidad, como por ejemplo:

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

En esta sección se actualiza el proyecto de aplicación de consola en la solución. Modifique el método SendTemplateNotificationAsync en la aplicación de consola que creó anteriormente con el código siguiente:

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 simple llamada entregará la noticia localizada a todos los dispositivos, con independencia de la plataforma, ya que el Centro de notificaciones crea y entrega la carga nativa correcta a todos los dispositivos suscritos a una etiqueta específica.

Ejecución de una aplicación de consola para enviar notificaciones localizadas

Ejecute la aplicación de consola para enviar notificaciones de todas las categorías y en todos los idiomas admitidos. Compruebe que solo recibe una notificación de las categorías a las que se ha suscrito y que el mensaje es para la configuración regional que ha seleccionado.

Pasos siguientes

En este tutorial, ha aprendido a enviar notificaciones push localizadas a dispositivos concretos que tienen etiquetas asociadas a sus registros. Para aprender a enviar notificaciones a usuarios específicos que puede que usen más de un dispositivo, pase al siguiente tutorial: