Incorporación de notificaciones push a la aplicación de Xamarin.FormsAdd push notifications to your Xamarin.Forms app

Nota

Visual Studio App Center está invirtiendo en servicios nuevos e integrados que son fundamentales para el desarrollo de aplicaciones móviles.Visual Studio App Center is investing in new and integrated services central to mobile app development. Los desarrolladores pueden usar los servicios de compilación, prueba y distribución para configurar la canalización de entrega e integración continuas.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Una vez que se ha implementado la aplicación, los desarrolladores pueden supervisar el estado y el uso de su aplicación con los servicios de análisis y diagnóstico, e interactuar con los usuarios mediante el servicio de inserción.Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Además, los desarrolladores pueden aprovechar Auth para autenticar a los usuarios y el servicio de datos para almacenar y sincronizar los datos de la aplicación en la nube.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Consulte App Center hoy mismo.Check out App Center today.

Información generalOverview

En este tutorial, agregará las notificaciones de inserción a todos los proyectos resultantes del inicio rápido de Xamarin.Forms.In this tutorial, you add push notifications to all the projects that resulted from the Xamarin.Forms quick start. Esto significa que se envía una notificación de inserción a todos los clientes multiplataforma cada vez que se inserta un registro.This means that a push notification is sent to all cross-platform clients every time a record is inserted.

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.If you do not use the downloaded quick start server project, you will need the push notification extension package. Para más información, vea Trabajar con el SDK de servidor de back-end de .NET para Azure Mobile Apps.For more information, see Work with the .NET backend server SDK for Azure Mobile Apps.

Requisitos previosPrerequisites

Para iOS, necesitará una suscripción de Apple Developer Program y un dispositivo de iOS físico.For iOS, you will need an Apple Developer Program membership and a physical iOS device. El simulador de iOS no admite notificaciones de inserción.The iOS simulator does not support push notifications.

Configurar un Centro de notificacionesConfigure a notification hub

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.The Mobile Apps feature of Azure App Service uses Azure Notification Hubs to send pushes, so you will be configuring a notification hub for your mobile app.

  1. En Azure Portal, vaya a App Services y seleccione el back-end de la aplicación.In the Azure portal, go to App Services, and then select your app back end. En Configuración, seleccione Insertar.Under Settings, select Push.

  2. Seleccione Conectar para agregar un recurso de Centro de notificaciones a la aplicación.To add a notification hub resource to the app, select Connect. Puede crear un centro o conectarse a uno existente.You can either create a hub or connect to an existing one.

    Configurar un centro

Ya ha conectado un centro de notificaciones al proyecto de back-end de Mobile Apps.Now you have connected a notification hub to your Mobile Apps back-end project. 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.Later you configure this notification hub to connect to a platform notification system (PNS) to push to devices.

Actualización del proyecto de servidor para enviar notificaciones pushUpdate the server project to send push notifications

En esta sección, se actualiza el código del proyecto de back-end de Mobile Apps existente con el objetivo de enviar una notificación push cada vez que se agrega un nuevo elemento.In this section, you update code in your existing Mobile Apps back-end project to send a push notification every time a new item is added. Este proceso funciona con la característica de plantillas de Azure Notification Hubs, que permite inserciones multiplataforma.This process is powered by the template feature of Azure Notification Hubs, which enables cross-platform pushes. Los diversos clientes se registran para recibir notificaciones push mediante plantillas, y una solo notificación push puede acceder a todas las plataformas de cliente.The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

Elija uno de los procedimientos siguientes que se ajuste al tipo de proyecto de back-end—: back-end de .NET o back-end de Node.js.Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

Proyecto de back-end de .NET.NET back-end project

  1. En Visual Studio, haga clic con el botón derecho en el proyecto de servidor.In Visual Studio, right-click the server project. A continuación, seleccione Administrar paquetes NuGet.Then select Manage NuGet Packages. Busque Microsoft.Azure.NotificationHubs y, después, seleccione Instalar.Search for Microsoft.Azure.NotificationHubs, and then select Install. Este proceso instala la biblioteca de Notification Hubs para enviar notificaciones desde el back-end.This process installs the Notification Hubs library for sending notifications from the back end.

  2. En el proyecto de servidor, abra Controladores > TodoItemController.cs.In the server project, open Controllers > TodoItemController.cs. Luego, agregue las siguientes instrucciones using:Then add the following using statements:

    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:In the PostTodoItem method, add the following code after the call to 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 a new Notification Hub client.
    NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
    // Send the message so that all template registrations that contain "messageParam"
    // receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
    Dictionary<string,string> templateParams = new Dictionary<string,string>();
    templateParams["messageParam"] = item.Text + " was added to the list.";
    
    try
    {
        // Send the push notification and log the results.
        var result = await hub.SendTemplateNotificationAsync(templateParams);
    
        // 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 proceso envía una notificación de plantilla que contiene el archivo item.text cuando se inserta un nuevo elemento.This process sends a template notification that contains the item.Text when a new item is inserted.

  4. Vuelva a publicar el proyecto de servidor.Republish the server project.

Proyecto de back-end de Node.jsNode.js back-end project

  1. Si no lo ha hecho todavía, descargue el proyecto de back-end de inicio rápido o use el editor en línea de Azure Portal.If you haven't already done so, download the quickstart back-end project, or else use the online editor in the Azure portal.

  2. Reemplace el código existente en el archivo todoitem.js por el siguiente:Replace the existing code in todoitem.js with the following code:

    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 template payload.
    var payload = '{"messageParam": "' + context.item.text + '" }';  
    
    // 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 template notification.
                context.push.send(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;  
    

    Este proceso envía una notificación de plantilla que contiene el archivo item.text cuando se inserta un nuevo elemento.This process sends a template notification that contains the item.text when a new item is inserted.

  3. Cuando edite el archivo en el equipo local, vuelva a publicar el proyecto de servidor.When you edit the file on your local computer, republish the server project.

Configuración y ejecución del proyecto de Android (opcional)Configure and run the Android project (optional)

Complete esta sección para habilitar las notificaciones push para el proyecto Droid de Xamarin.Forms para Android.Complete this section to enable push notifications for the Xamarin.Forms Droid project for Android.

Habilitar la mensajería en la nube Firebase (FCM)Enable Firebase Cloud Messaging (FCM)

  1. Inicie sesión en la consola Firebase.Sign in to the Firebase console. Si aún no tiene uno, cree un nuevo proyecto de Firebase.Create a new Firebase project if you don't already have one.

  2. Después de crear el proyecto, seleccione Add Firebase to your Android app (Añade Firebase a tu aplicación de Android).After you create your project, select Add Firebase to your Android app.

    Agregar Firebase a una aplicación de Android

  3. En la página Add Firebase to your Android app (Agregar Firebase a la aplicación Android), haga lo siguiente:On the Add Firebase to your Android app page, take the following steps:

    1. En Android package name (Nombre del paquete Android), copie el valor de applicationId en el archivo build.gradle de la aplicación.For Android package name, copy the value of your applicationId in your application's build.gradle file. En este ejemplo, es com.fabrikam.fcmtutorial1app.In this example, it's com.fabrikam.fcmtutorial1app.

      Especifique el nombre del paquete.

    2. Seleccione Registrar aplicación.Select Register app.

  4. Seleccione Descargar google-services.json, guarde el archivo en la carpeta app del proyecto y, a continuación, seleccione Siguiente.Select Download google-services.json, save the file into the app folder of your project, and then select Next.

    Descargue el archivo google-services.json.

  5. Haga que los siguientes cambios de configuración en el proyecto en Android Studio.Make the following configuration changes to your project in Android Studio.

    1. En el archivoproject-level build.gradle (<project>/build.gradle), agregue la siguiente instrucción a la sección dependencies.In your project-level build.gradle file (<project>/build.gradle), add the following statement to the dependencies section.

      classpath 'com.google.gms:google-services:4.0.1'
      
    2. En el archivoapp-level build.gradle (<project>/<app-module>/build.gradle), agregue la siguiente instrucción a la sección dependencies.In your app-level build.gradle file (<project>/<app-module>/build.gradle), add the following statement to the dependencies section.

      implementation 'com.google.firebase:firebase-core:16.0.1'
      
    3. Agregue la siguiente línea al final del archivo app-level build.gradle después de la sección de dependencias.Add the following line to the end of the app-level build.gradle file after the dependencies section.

      apply plugin: 'com.google.gms.google-services'
      
    4. Seleccione Sinc Now (Sincronizar ahora) en la barra de herramientas.Select Sync now on the toolbar.

      cambios de configuración de build.gradle

  6. Seleccione Next (Siguiente).Select Next.

  7. Seleccione Skip this step (Omitir este paso).Select Skip this step.

    Omita el último paso.

  8. En la consola Firebase, seleccione el icono de la rueda dentada del proyecto.In the Firebase console, select the cog for your project. Luego, seleccione Project Settings (Configuración del proyecto).Then select Project Settings.

    Seleccionar Project Settings (Configuración del proyecto)

  9. Si aún no ha descargado el archivo google-services.json en la carpeta app del proyecto de Android Studio, puede hacerlo en esta página.If you haven't downloaded the google-services.json file into the app folder of your Android Studio project, you can do so on this page.

  10. Cambie a la pestaña Cloud Messaging de la parte superior.Switch to the Cloud Messaging tab at the top.

  11. Copie y guarde la clave del servidor para su uso posterior.Copy and save the Server key for later use. Usará este valor para configurar el concentrador.You use this value to configure your hub.

Configuración del back-end de Mobile Apps para enviar solicitudes push mediante FCMConfigure the Mobile Apps back end to send push requests by using FCM

  1. En Azure Portal, seleccione Examinar todo > App Services.In the Azure portal, select Browse All > App Services. A continuación, seleccione el back-end de Mobile Apps.Then select your Mobile Apps back end.
  2. En Configuración, seleccione Insertar.Under Settings, select Push. A continuación, seleccione Configurar servicios de notificación de inserción.Then select Configure push notification services.
  3. Vaya a Google (GCM) .Go to Google (GCM). Escriba la clave del servidor heredado FCM obtenida en la consola de Firebase y, luego, seleccione Guardar.Enter the FCM legacy server key that you obtained from the Firebase console, and then select Save.

El servicio ahora está configurado para trabajar con Firebase Cloud Messaging.Your service is now configured to work with Firebase Cloud Messaging.

Incorporación de notificaciones push al proyecto de AndroidAdd push notifications to the Android project

Con el back-end configurado con FCM, puede agregar componentes y códigos al cliente para registrar con FCM.With the back end configured with FCM, you can add components and codes to the client to register with FCM. También puede registrarse para notificaciones de inserción con Azure Notification Hubs a través del back-end de Mobile Apps y recibir notificaciones.You can also register for push notifications with Azure Notification Hubs through the Mobile Apps back end, and receive notifications.

  1. En el proyecto Droid, haga clic con el botón derecho en Referencias > Administrar paquetes NuGet... .In the Droid project, right-click References > Manage NuGet Packages ....
  2. En la ventana del Administrador de paquetes NuGet, busque el paquete Xamarin.Firebase.Messaging y agréguelo al proyecto.In the NuGet Package Manager window, search for the Xamarin.Firebase.Messaging package and add it to the project.
  3. En las propiedades del proyecto Droid, configure la aplicación para la compilación con la versión Android 7.0 o posterior.In the project properties for the Droid project, set the app to compile using Android version 7.0 or higher.
  4. Agregue el archivo google services.json, que se descargó de la consola de Firebase, a la raíz del proyecto Droid y establezca su acción de compilación en GoogleServicesJson.Add the google-services.json file, downloaded from the Firebase console, to the root of the Droid project and set its build action to GoogleServicesJson. Para más información, consulte Add the Google Services JSON File (Incorporación del archivo JSON de Google Services).For more information, see Add the Google Services JSON File.

Registro en Firebase Cloud MessagingRegistering with Firebase Cloud Messaging

  1. Abra el archivo AndroidManifest.xml e inserte los siguientes elementos <receiver> en el elemento <application>:Open the AndroidManifest.xml file and insert the following <receiver> elements into the <application> element:

    <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdInternalReceiver" android:exported="false" />
    <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND">
        <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
        <category android:name="${applicationId}" />
        </intent-filter>
    </receiver>
    

Implementación del servicio de identificación de instancia de FirebaseImplementing the Firebase Instance ID Service

  1. Agregue una nueva clase al proyecto Droid denominada FirebaseRegistrationService y asegúrese de que las siguientes instrucciones using están presentes en la parte superior del archivo:Add a new class to the Droid project named FirebaseRegistrationService, and make sure that the following using statements are present at the top of the file:

    using System.Threading.Tasks;
    using Android.App;
    using Android.Util;
    using Firebase.Iid;
    using Microsoft.WindowsAzure.MobileServices;
    
  2. Reemplace la clase FirebaseRegistrationService vacía por el siguiente código:Replace the empty FirebaseRegistrationService class with the following code:

    [Service]
    [IntentFilter(new[] { "com.google.firebase.INSTANCE_ID_EVENT" })]
    public class FirebaseRegistrationService : FirebaseInstanceIdService
    {
        const string TAG = "FirebaseRegistrationService";
    
        public override void OnTokenRefresh()
        {
            var refreshedToken = FirebaseInstanceId.Instance.Token;
            Log.Debug(TAG, "Refreshed token: " + refreshedToken);
            SendRegistrationTokenToAzureNotificationHub(refreshedToken);
        }
    
        void SendRegistrationTokenToAzureNotificationHub(string token)
        {
            // Update notification hub registration
            Task.Run(async () =>
            {
                await AzureNotificationHubService.RegisterAsync(TodoItemManager.DefaultManager.CurrentClient.GetPush(), token);
            });
        }
    }
    

    La clase FirebaseRegistrationService es responsable de generar tokens de seguridad que autorizan el acceso de la aplicación a FCM.The FirebaseRegistrationService class is responsible for generating security tokens that authorize the application to access FCM. El método OnTokenRefresh se invoca cuando la aplicación recibe un token de registro de FCM.The OnTokenRefresh method is invoked when the application receives a registration token from FCM. El método recupera el token de la propiedad FirebaseInstanceId.Instance.Token, que FCM actualiza de forma asincrónica.The method retrieves the token from the FirebaseInstanceId.Instance.Token property, which is asynchronously updated by FCM. El método OnTokenRefresh se invoca con poca frecuencia, porque el token solo se actualiza cuando la aplicación se instala o desinstala, el usuario elimina los datos de la aplicación, la aplicación borra el identificador de instancia o peligra la seguridad del token.The OnTokenRefresh method is infrequently invoked, because the token is only updated when the application is installed or uninstalled, when the user deletes application data, when the application erases the Instance ID, or when the security of the token has been compromised. Además, el servicio de identificación de instancia de FCM solicitará que la aplicación actualice el token de manera periódica, normalmente cada 6 meses.In addition, the FCM Instance ID service will request that the application refreshes its token periodically, typically every 6 months.

    El método OnTokenRefresh también invoca el método SendRegistrationTokenToAzureNotificationHub, que se usa para asociar el token de registro del usuario con el centro de notificaciones de Azure.The OnTokenRefresh method also invokes the SendRegistrationTokenToAzureNotificationHub method, which is used to associate the user's registration token with the Azure Notification Hub.

Registro con el centro de notificaciones de AzureRegistering with the Azure Notification Hub

  1. Agregue una nueva clase al proyecto Droid denominada AzureNotificationHubService y asegúrese de que las siguientes instrucciones using están presentes en la parte superior del archivo:Add a new class to the Droid project named AzureNotificationHubService, and make sure that the following using statements are present at the top of the file:

    using System;
    using System.Threading.Tasks;
    using Android.Util;
    using Microsoft.WindowsAzure.MobileServices;
    using Newtonsoft.Json.Linq;
    
  2. Reemplace la clase AzureNotificationHubService vacía por el siguiente código:Replace the empty AzureNotificationHubService class with the following code:

    public class AzureNotificationHubService
    {
        const string TAG = "AzureNotificationHubService";
    
        public static async Task RegisterAsync(Push push, string token)
        {
            try
            {
                const string templateBody = "{\"data\":{\"message\":\"$(messageParam)\"}}";
                JObject templates = new JObject();
                templates["genericMessage"] = new JObject
                {
                    {"body", templateBody}
                };
    
                await push.RegisterAsync(token, templates);
                Log.Info("Push Installation Id: ", push.InstallationId.ToString());
            }
            catch (Exception ex)
            {
                Log.Error(TAG, "Could not register with Notification Hub: " + ex.Message);
            }
        }
    }
    

    El método RegisterAsync crea una plantilla de mensaje de notificación simple como JSON y registros para recibir notificaciones de plantilla desde el centro de notificaciones con el token de registro de Firebase.The RegisterAsync method creates a simple notification message template as JSON, and registers to receive template notifications from the notification hub, using the Firebase registration token. Esto garantiza que las notificaciones enviadas desde el centro de notificaciones de Azure se destinan al dispositivo que representa el token de registro.This ensures that any notifications sent from the Azure Notification Hub will target the device represented by the registration token.

Visualización del contenido de una notificación pushDisplaying the Contents of a Push Notification

  1. Agregue una nueva clase al proyecto Droid denominada FirebaseNotificationService y asegúrese de que las siguientes instrucciones using están presentes en la parte superior del archivo:Add a new class to the Droid project named FirebaseNotificationService, and make sure that the following using statements are present at the top of the file:

    using Android.App;
    using Android.Content;
    using Android.Media;
    using Android.Support.V7.App;
    using Android.Util;
    using Firebase.Messaging;
    
  2. Reemplace la clase FirebaseNotificationService vacía por el siguiente código:Replace the empty FirebaseNotificationService class with the following code:

    [Service]
    [IntentFilter(new[] { "com.google.firebase.MESSAGING_EVENT" })]
    public class FirebaseNotificationService : FirebaseMessagingService
    {
        const string TAG = "FirebaseNotificationService";
    
        public override void OnMessageReceived(RemoteMessage message)
        {
            Log.Debug(TAG, "From: " + message.From);
    
            // Pull message body out of the template
            var messageBody = message.Data["message"];
            if (string.IsNullOrWhiteSpace(messageBody))
                return;
    
            Log.Debug(TAG, "Notification message body: " + messageBody);
            SendNotification(messageBody);
        }
    
        void SendNotification(string messageBody)
        {
            var intent = new Intent(this, typeof(MainActivity));
            intent.AddFlags(ActivityFlags.ClearTop);
            var pendingIntent = PendingIntent.GetActivity(this, 0, intent, PendingIntentFlags.OneShot);
    
            var notificationBuilder = new NotificationCompat.Builder(this)
                .SetSmallIcon(Resource.Drawable.ic_stat_ic_notification)
                .SetContentTitle("New Todo Item")
                .SetContentText(messageBody)
                .SetContentIntent(pendingIntent)
                .SetSound(RingtoneManager.GetDefaultUri(RingtoneType.Notification))
                .SetAutoCancel(true);
    
            var notificationManager = NotificationManager.FromContext(this);
            notificationManager.Notify(0, notificationBuilder.Build());
        }
    }
    

    El método OnMessageReceived, que se invoca cuando una aplicación recibe una notificación de FCM, extrae el contenido del mensaje y llama al método SendNotification.The OnMessageReceived method, which is invoked when an application receives a notification from FCM, extracts the message content, and calls the SendNotification method. Este método convierte el contenido del mensaje en una notificación local que se inicia mientras se ejecuta la aplicación, con la notificación que aparece en el área de notificación.This method converts the message content into a local notification that's launched while the application is running, with the notification appearing in the notification area.

Ahora, está listo para probar las notificaciones push en la aplicación que se ejecuta en el emulador o un dispositivo Android.Now, you are ready test push notifications in the app running on an Android device or the emulator.

Prueba de las notificaciones push en la aplicación de AndroidTest push notifications in your Android app

Los dos primeros pasos son necesarios solo cuando se realizan pruebas en un emulador.The first two steps are required only when you're testing on an emulator.

  1. Asegúrese de que la implementación o la depuración se van a realizar en un dispositivo o emulador configurado con Google Play Services.Make sure that you are deploying to or debugging on a device or emulator that is configured with Google Play Services. Para comprobar esto, confirme que las aplicaciones de Play estén instaladas en el dispositivo o emulador.This can be verified by checking that the Play apps are installed on the device or emulator.
  2. Agregue una cuenta de Google al dispositivo Android haciendo clic en Aplicaciones > Configuración > Agregar cuenta.Add a Google account to the Android device by clicking Apps > Settings > Add account. Luego siga las indicaciones para agregar una cuenta de Google existente al dispositivo o para crear una nueva.Then follow the prompts to add an existing Google account to the device, or to create a new one.
  3. En Visual Studio o Xamarin Studio, haga clic con el botón derecho en el proyecto Droid y haga clic en Establecer como proyecto de inicio.In Visual Studio or Xamarin Studio, right-click the Droid project and click Set as startup project.
  4. Haga clic en Ejecutar para compilar el proyecto e iniciar la aplicación en el dispositivo Android o el emulador.Click Run to build the project and start the app on your Android device or emulator.
  5. En la aplicación, escriba una tarea y luego haga clic en el icono de signo de suma ( + ).In the app, type a task, and then click the plus (+) icon.
  6. Compruebe que se recibe una notificación cuando se agrega un artículo.Verify that a notification is received when an item is added.

Configuración y ejecución del proyecto de iOS (opcional)Configure and run the iOS project (optional)

Esta sección trata de la ejecución del proyecto de iOS de Xamarin para dispositivos iOS.This section is for running the Xamarin iOS project for iOS devices. Puede omitir esta sección si no está trabajando con dispositivos iOS.You can skip this section if you are not working with iOS devices.

Generación del archivo de solicitud de firma de certificadoGenerate the certificate-signing request file

El servicio Apple Push Notification Service (APNS) utiliza certificados para autenticar las notificaciones push.The Apple Push Notification Service (APNs) uses certificates to authenticate your push notifications. Siga estas instrucciones para crear el certificado de inserción necesario para enviar y recibir notificaciones.Follow these instructions to create the necessary push certificate to send and receive notifications. Para obtener más información sobre estos conceptos, consulte la documentación oficial de Apple Push Notification Service (Servicio de notificaciones push de Apple).For more information on these concepts, see the official Apple Push Notification Service documentation.

Genere el archivo de solicitud de firma de certificado (CSR) que utiliza Apple para generar un certificado push firmado.Generate the Certificate Signing Request (CSR) file, which Apple uses to generate a signed push certificate.

  1. En el Mac, ejecute la herramienta Acceso a llaves.On your Mac, run the Keychain Access tool. Se puede activar desde la carpeta Utilities (Utilidades) o la carpeta Other (Otros) en el panel de inicio.It can be opened from the Utilities folder or the Other folder on the Launchpad.

  2. Seleccione Keychain Access (Acceso con cadena de claves), expanda Certificate Assistant (Asistente para certificados) y, después, seleccione Request a Certificate from a Certificate Authority (Solicitar un certificado a una entidad de certificación).Select Keychain Access, expand Certificate Assistant, and then select Request a Certificate from a Certificate Authority.

    Use Acceso a llaves para solicitar un nuevo certificado

  3. Seleccione una dirección de correo electrónico de usuario, escriba un valor en Common Name (Nombre común), asegúrese de que especifica Saved to disk (Guardar en disco) y, finalmente, seleccione Continue (Continuar).Select your User Email Address, enter your Common Name value, make sure that you specify Saved to disk, and then select Continue. Deje en blanco CA Email Address (Dirección de correo de la entidad de certificación), ya que no es obligatorio.Leave CA Email Address blank as it isn't required.

    Información obligatoria del certificado

  4. Escriba un nombre para el archivo CSR en Save As (Guardar como), seleccione la ubicación en Where (Dónde) y, a continuación, seleccione Save (Guardar).Enter a name for the CSR file in Save As, select the location in Where, and then select Save.

    Elección de un nombre de archivo para el certificado

    Esta acción guarda el archivo CSR en la ubicación seleccionada.This action saves the CSR file in the selected location. La ubicación predeterminada es Escritorio.The default location is Desktop. Recuerde la ubicación seleccionada para este archivo.Remember the location chosen for the file.

A continuación, se registrará la aplicación en Apple, se habilitarán las notificaciones push y se cargará el archivo CSR exportado para crear un certificado de inserción.Next, register your app with Apple, enable push notifications, and upload the exported CSR to create a push certificate.

Registro de la aplicación para notificaciones pushRegister your app for push notifications

Para insertar notificaciones en una aplicación iOS, es preciso no solo registrar la aplicación en Apple, sino también las notificaciones push.To push notifications to an iOS app, register your application with Apple and also register for push notifications.

  1. Si todavía no ha registrado la aplicación, vaya al portal de aprovisionamiento de iOS en el centro para desarrolladores de Apple.If you haven't already registered your app, browse to the iOS Provisioning Portal at the Apple Developer Center. Después, inicie sesión con su identificador de Apple, seleccione Identifiers (Identificadores), seleccione App IDs (Id. de aplicaciones) y, por último, seleccione + para registrar una nueva aplicación.After that, sign in with your Apple ID, select Identifiers, select App IDs, and finally select + to register a new app.

    Página de identificadores de aplicaciones del portal de aprovisionamiento de iOS

  2. Actualice los tres campos siguientes de la nueva aplicación y, después, seleccione Continue (Continuar):Update the following three values for your new app, and then select Continue:

    • Nombre: escriba un nombre descriptivo para la aplicación en el cuadro Name (Nombre) de la sección App ID Description (Descripción del identificador de la aplicación).Name: Type a descriptive name for your app in the Name box in the App ID Description section.

    • Bundle Identifier (Identificador de agrupación): en la sección Explicit App ID (Identificador de aplicación explícita), escriba un identificador de paquete con el formato <Organization Identifier>.<Product Name>, tal como se menciona en App Distribution Guide (Guía de distribución de aplicaciones).Bundle Identifier: In the Explicit App ID section, enter a Bundle Identifier of the form <Organization Identifier>.<Product Name> as mentioned in the App Distribution Guide. El identificador de organización y el nombre del producto deben coincidir con el identificador de la organización y con el nombre del producto que use al crear el proyecto Xcode.The Organization Identifier and Product Name values must match the organization identifier and product name you use when you create your Xcode project. En la captura de pantalla que aparece a continuación, el valor de NotificationHubs se usa como identificador de una organización, mientras que el valor GetStarted se usa como el nombre del producto.In the following screenshot, the NotificationHubs value is used as an organization identifier and the GetStarted value is used as the product name. Asegúrese de que el valor del identificador de paquete coincide con el valor del proyecto Xcode, para que Xcode utilice el perfil de publicación correcto.Make sure the Bundle Identifier value matches the value in your Xcode project, so that Xcode will use the correct publishing profile.

    • Notificaciones push: Seleccione la opción Notificaciones push en la sección App Services.Push Notifications: Check the Push Notifications option in the App Services section.

      Formulario para registrar un nuevo identificador de aplicación

      De esta forma, se genera el identificador de la aplicación y se solicita que confirme la información.This action generates your App ID and requests that you confirm the information. Seleccione Register (Registrar) para confirmar el nuevo identificador de la aplicación.Select Register to confirm the new App ID.

      Después de seleccionar Register (Registrar), verá la pantalla Registration complete (Registro completo), tal como se muestra en la siguiente imagen.After you select Register, you see the Registration complete screen as shown in the following image. Seleccione Listo.Select Done.

      Registro de identificador de aplicación completo que muestra los derechos

  3. En el centro para desarrolladores, en App IDs (Id. de aplicaciones), busque el identificador de la aplicación que ha creado y seleccione su fila.In the Developer Center, under App IDs, locate the app ID that you created and select its row.

    Lista de identificadores de aplicaciones

    Seleccione el identificador de la aplicación para mostrar los detalles de la aplicación y, después, seleccione el botón Edit (Editar) situado en la parte inferior.Select the app ID to display the app details, and then select the Edit button at the bottom.

    Editar página de identificadores de aplicaciones

  4. Desplácese a la parte inferior de la pantalla y seleccione el botón Create Certificate (Crear certificado) en la sección Development Push SSL Certificate (Certificado SSL de inserción de desarrollo).Scroll to the bottom of the screen and select the Create Certificate button under the Development Push SSL Certificate section.

    Crear certificado para el botón de identificador de aplicación

    Se mostrará ahora el asistente Add iOS Certificate (Agregar certificado de iOS).You now see the Add iOS Certificate assistant.

    Nota

    Este tutorial usa un certificado de desarrollo.This tutorial uses a development certificate. Se usa el mismo proceso cuando se registra un certificado de producción.The same process is used when registering a production certificate. Asegúrese de usa el mismo tipo de certificado cuando envíe notificaciones.Just make sure that you use the same certificate type when sending notifications.

  5. Seleccione Choose File (Elegir archivo), vaya a la ubicación donde guardó el archivo CSR de la primera tarea y, después, seleccione Generate (Generar).Select Choose File, browse to the location where you saved the CSR file from the first task, and then select Generate.

    Página de carga de archivos CSR de certificados generados

  6. Cuando el portal crea el certificado, seleccione el botón Download (Descargar) y, a continuación, seleccione Done (Listo).After the portal creates the certificate, select the Download button and then select Done.

    Página de descarga de certificados generados

    El certificado se descarga y se guarda en el equipo en la carpeta de descargas.The certificate is downloaded and saved to your computer in your Downloads folder.

    Busque el archivo de certificado en la carpeta de descargas

    Nota

    De manera predeterminada, el certificado de desarrollo descargado se denomina aps_development.cer.By default, the downloaded development certificate is named aps_development.cer.

  7. Seleccione el certificado push aps_development.cer descargado.Select the downloaded push certificate aps_development.cer.

    Esta operación instala el certificado nuevo en la cadena de llaves, tal como se muestra en la siguiente imagen:This action installs the new certificate in the Keychain, as shown in the following image:

    Lista de certificados de Acceso a llaves en la que aparece el nuevo certificado

    Nota

    Aunque el nombre del certificado puede ser diferente, llevará el prefijo Apple Development iOS Push Services (Servicios push de desarrollo de Apple iOS).Although the name in your certificate might be different, the name will be prefixed with Apple Development iOS Push Services.

  8. En Acceso a llaves, haga clic en el nuevo certificado de inserción que creó, en la categoría Certificados .In Keychain Access, right-click the new push certificate that you created in the Certificates category. Haga clic en Export (Exportar), asigne un nombre al archivo, seleccione el formato .p12 y, después, haga clic en Save (Guardar).Select Export, name the file, select the .p12 format, and then select Save.

    Exportación del certificado en formato p12

    Anote el nombre de archivo y la ubicación del certificado p12 exportado.Make a note of the file name and location of the exported .p12 certificate. Se usan para habilitar la autenticación con APNs.They are used to enable authentication with APNs.

    Nota

    En este tutorial se crea un archivo denominado QuickStart.p12.This tutorial creates a file named QuickStart.p12. El nombre del archivo y la ubicación pueden ser diferentes.Your file name and location might be different.

Creación de un perfil de aprovisionamiento para la aplicaciónCreate a provisioning profile for the app

  1. En el portal de aprovisionamiento de iOS, seleccione Provisioning Profiles (Perfiles de aprovisionamiento), luego All (Todo) y, finalmente, seleccione + para crear un perfil.In the iOS Provisioning Portal, select Provisioning Profiles, select All, and then select + to create a new profile. A continuación, verá el asistente para agregar el perfil de aprovisionamiento de iOS.You see the Add iOS Provisioning Profile wizard.

    Lista de perfiles de aprovisionamiento

  2. Seleccione iOS App Development (Desarrollo de aplicaciones de iOS) bajo Development (Desarrollo) como tipo de perfil de aprovisionamiento y, a continuación, seleccione Continue (Continuar).Select iOS App Development under Development as the provisioning profile type, and select Continue.

  3. Una vez hecho esto, seleccione el identificador de la aplicación que acaba de crear en la lista desplegable App ID (Id. de la aplicación) y, a continuación, seleccione Continuar.Next, select the app ID you created from the App ID drop-down list, and select Continue.

    Seleccionar el identificador de la aplicación

  4. En la ventana Select certificates (Seleccionar certificados), seleccione el certificado de desarrollo habitual que se usó para la firma de código y, a continuación, seleccione Continue (Continue).In the Select certificates window, select your usual development certificate that you used for code signing, and select Continue. Este certificado no es el certificado push que creó.This certificate isn't the push certificate you created.

    Seleccionar el certificado

  5. Después, seleccione en los dispositivos que va a usar para la prueba y seleccione Continue (Continuar).Next, select the devices to use for testing, and select Continue.

    Seleccionar los dispositivos

  6. Para terminar, seleccione un nombre para el perfil en Profile Name (Nombre de perfil) y seleccione Generate (Generar).Finally, pick a name for the profile in Profile Name, and select Generate.

    Elegir el nombre del perfil de aprovisionamiento

  7. Cuando se crea el nuevo perfil de aprovisionamiento, elija descargarlo e instalarlo en la máquina de desarrollo de Xcode.When the new provisioning profile is created, choose to download and install it on your Xcode development machine. A continuación, seleccione Done (Listo).Then select Done.

    Descargar el perfil de aprovisionamiento

Creación de un centro de notificacionesCreate a notification hub

En esta sección, va a crear un centro de notificaciones y configurar la autenticación con APNs mediante el certificado push .p12 que creó anteriormente.In this section, you create a notification hub and configure authentication with APNs by using the .p12 push certificate that you previously created. Si desea usar un centro de notificaciones ya creado, puede omitir los pasos hasta el paso 5.If you want to use a notification hub that you've already created, you can skip to step 5.

  1. Inicie sesión en el Azure Portal.Sign in to the Azure portal.

  2. Seleccione Todos los servicios en el menú de la izquierda y seleccione Notification Hubs en la sección Móvil.Select All services on the left menu, and then select Notification Hubs in the Mobile section. Seleccione el icono de estrella junto al nombre del servicio para agregarlo a la sección FAVORITOS en el menú de la izquierda.Select the star icon next to the service name to add the service to the FAVORITES section on the left menu. Cuando se agrega Notification Hubs a FAVORITOS, selecciónelo en el menú de la izquierda.After you add Notification Hubs to FAVORITES, select it on the left menu.

    Azure Portal: selección de Notification Hubs

  3. En la página Notification Hubs, seleccione Agregar en la barra de herramientas.On the Notification Hubs page, select Add on the toolbar.

    Notification Hubs: botón Agregar de la barra de herramientas

  4. En la página Notification Hubs, realice los pasos siguientes:On the Notification Hub page, do the following steps:

    1. Escriba un nombre en el centro de notificaciones.Enter a name in Notification Hub.

    2. Escriba un nombre en Crear un nuevo espacio de nombres.Enter a name in Create a new namespace. Un espacio de nombres contiene uno o más centros.A namespace contains one or more hubs.

    3. Seleccione un valor en el cuadro de lista desplegable Ubicación.Select a value from the Location drop-down list box. Este valor especifica la ubicación en la que quiere crear el centro.This value specifies the location in which you want to create the hub.

    4. Seleccione un grupo de recursos existente en Grupo de recursos o cree un nombre para el nuevo grupo.Select an existing resource group in Resource Group, or create a name for a new resource group.

    5. Seleccione Crear.Select Create.

      Azure Portal: establecimiento de las propiedades del centro de notificaciones

  5. Seleccione Notificaciones (el icono de campana) y, luego, Ir al recurso.Select Notifications (the bell icon), and then select Go to resource. También puede actualizar la lista en la página Notification Hubs y seleccionar su centro.You can also refresh the list on the Notification Hubs page and select your hub.

    Azure Portal: notificaciones -> Go to resource (Ir al recurso)

  6. Seleccione Directivas de acceso en la lista.Select Access Policies from the list. Observe que las dos cadenas de conexión están disponibles.Note that the two connection strings are available to you. Las necesitará más adelante para gestionar las notificaciones push.You'll need them later to handle push notifications.

    Importante

    No use la directiva DefaultFullSharedAccessSignature en la aplicación.Do not use the DefaultFullSharedAccessSignature policy in your application. Está pensada para usarse solamente en el back-end.This is meant to be used in your back end only.

    Azure Portal: cadenas de conexión del centro de notificaciones

Configuración de un centro de notificaciones con información de APNsConfigure your notification hub with APNs information

  1. En Notification Services (Servicios de notificación), seleccione Apple (APNS) .Under Notification Services, select Apple (APNS).

  2. Seleccione Certificado.Select Certificate.

  3. Seleccione el icono del archivo.Select the file icon.

  4. Seleccione el archivo .p12 que exportó antes.Select the .p12 file that you exported earlier.

  5. Especifique la contraseña correcta.Specify the correct password.

  6. Seleccione el modo Espacio aislado.Select Sandbox mode. Use el modo Producción solo si desea enviar notificaciones push a los usuarios que compraron la aplicación en la tienda.Use the Production mode only if you want to send push notifications to users who purchased your app from the store.

    Configuración del certificado de APNs en Azure Portal

Ahora ya ha configurado el centro de notificaciones con APNs.You've now configured your notification hub with APNs. Tiene también la cadena de conexión para registrar la aplicación y enviar notificaciones push.You also have the connection strings to register your app and send push notifications.

Configuración del Centro de notificaciones para APNSConfigure the notification hub for APNS

  1. En el equipo Mac, inicie Acceso a llaves.On your Mac, launch Keychain Access. En la barra de navegación izquierda, en Categoría, abra Mis certificados.On the left navigation bar, under Category, open My Certificates. Busque el certificado SSL que descargó en la sección anterior y muestre su contenido.Find the SSL certificate that you downloaded in the previous section, and then disclose its contents. Seleccione solo el certificado (no seleccione la clave privada).Select only the certificate (do not select the private key). A continuación, expórtelo.Then export it.
  2. En Azure Portal, seleccione Examinar todo > App Services.In the Azure portal, select Browse All > App Services. A continuación, seleccione el back-end de Mobile Apps.Then select your Mobile Apps back end.
  3. En Configuración, seleccione App Service Push.Under Settings, select App Service Push. A continuación, seleccione el nombre del centro de notificaciones.Then select your notification hub name.
  4. Vaya a Apple Push Notification Service > Cargar certificado.Go to Apple Push Notification Services > Upload Certificate. Cargue el archivo .p12 y seleccione el Modo correcto (según si el certificado SSL de cliente es para un espacio aislado o para producción).Upload the .p12 file, selecting the correct Mode (depending on whether your client SSL certificate from earlier is production or sandbox). Guarde los cambios.Save any changes.

El servicio ahora está configurado para trabajar con las notificaciones push en iOS.Your service is now configured to work with push notifications on iOS.

A continuación, realizará la configuración del proyecto de iOS en Xamarin Studio o Visual Studio.Next, you will configure the iOS project setting in Xamarin Studio or Visual Studio.

Configuración del proyecto de iOS en Xamarin StudioConfigure the iOS project in Xamarin Studio

  1. En Xamarin.Studio, abra Info.plist y actualice el identificador de agrupación de trabajos con el identificador que ha creado antes con su nuevo identificador de la aplicación.In Xamarin.Studio, open Info.plist, and update the Bundle Identifier with the bundle ID that you created earlier with your new app ID.

  2. Desplácese hacia abajo hasta Background Modes (Modos en segundo plano).Scroll down to Background Modes. Active la casilla Enable Background Modes (Habilitar modos en segundo plano) y la casilla Remote notifications (Notificaciones remotas).Select the Enable Background Modes box and the Remote notifications box.

  3. Haga doble clic en el proyecto en el Panel de soluciones para abrir las opciones de proyecto.Double-click your project in the Solution Panel to open Project Options.

  4. En Build (Compilar), elija iOS Bundle Signing (Registro de agrupaciones de trabajos iOS) y seleccione la identidad y el perfil de aprovisionamiento correspondientes que acaba de configurar para este proyecto.Under Build, choose iOS Bundle Signing, and select the corresponding identity and provisioning profile you just set up for this project.

    De esta forma, se garantiza que el proyecto usa el nuevo perfil para la firma de código.This ensures that the project uses the new profile for code signing. Para ver la documentación oficial de aprovisionamiento de dispositivos Xamarin, consulte Aprovisionamiento de dispositivos Xamarin.For the official Xamarin device provisioning documentation, see Xamarin Device Provisioning.

Configuración del proyecto de iOS en Visual StudioConfigure the iOS project in Visual Studio

  1. En Visual Studio, haga clic con el botón derecho en el proyecto y después haga clic en Propiedades.In Visual Studio, right-click the project, and then click Properties.

  2. En las páginas de propiedades, haga clic en la pestaña Aplicación de iOS y actualice el identificador con el id. que creó anteriormente.In the properties pages, click the iOS Application tab, and update the Identifier with the ID that you created earlier.

  3. En la pestaña iOS Bundle Signing (Registro de agrupación de trabajos iOS), seleccione la identidad y el perfil de aprovisionamiento que acaba de configurar para este proyecto.In the iOS Bundle Signing tab, select the corresponding identity and provisioning profile you just set up for this project.

    De esta forma, se garantiza que el proyecto usa el nuevo perfil para la firma de código.This ensures that the project uses the new profile for code signing. Para ver la documentación oficial de aprovisionamiento de dispositivos Xamarin, consulte Aprovisionamiento de dispositivos Xamarin.For the official Xamarin device provisioning documentation, see Xamarin Device Provisioning.

  4. Haga doble clic en Info.plist para abrirlo y, a continuación, habilite RemoteNotifications en Background Modes (Modos en segundo plano).Double-click Info.plist to open it, and then enable RemoteNotifications under Background Modes.

Incorporación de notificaciones push a la aplicación iOSAdd push notifications to your iOS app

  1. En el proyecto iOS, abra AppDelegate.cs y agregue la siguiente instrucción en la parte superior del archivo de código.In the iOS project, open AppDelegate.cs and add the following statement to the top of the code file.

    using Newtonsoft.Json.Linq;
    
  2. En la clase AppDelegate, agregue una invalidación para el evento RegisteredForRemoteNotifications con el fin de registrar las notificaciones:In the AppDelegate class, add an override for the RegisteredForRemoteNotifications event to register for notifications:

    public override void RegisteredForRemoteNotifications(UIApplication application,
        NSData deviceToken)
    {
        const string templateBodyAPNS = "{\"aps\":{\"alert\":\"$(messageParam)\"}}";
    
        JObject templates = new JObject();
        templates["genericMessage"] = new JObject
            {
                {"body", templateBodyAPNS}
            };
    
        // Register for push with your mobile app
        Push push = TodoItemManager.DefaultManager.CurrentClient.GetPush();
        push.RegisterAsync(deviceToken, templates);
    }
    
  3. En AppDelegate, agregue también la invalidación siguiente para el controlador de eventos DidReceiveRemoteNotification:In AppDelegate, also add the following override for the DidReceiveRemoteNotification event handler:

    public override void DidReceiveRemoteNotification(UIApplication application,
        NSDictionary userInfo, Action<UIBackgroundFetchResult> completionHandler)
    {
        NSDictionary aps = userInfo.ObjectForKey(new NSString("aps")) as NSDictionary;
    
        string alert = string.Empty;
        if (aps.ContainsKey(new NSString("alert")))
            alert = (aps[new NSString("alert")] as NSString).ToString();
    
        //show alert
        if (!string.IsNullOrEmpty(alert))
        {
            UIAlertView avAlert = new UIAlertView("Notification", alert, null, "OK", null);
            avAlert.Show();
        }
    }
    

    Este método controla las notificaciones entrantes mientras se ejecuta la aplicación.This method handles incoming notifications while the app is running.

  4. En la clase AppDelegate, agregue el siguiente código al método FinishedLaunching:In the AppDelegate class, add the following code to the FinishedLaunching method:

    // Register for push notifications.
    var settings = UIUserNotificationSettings.GetSettingsForTypes(
        UIUserNotificationType.Alert
        | UIUserNotificationType.Badge
        | UIUserNotificationType.Sound,
        new NSSet());
    
    UIApplication.SharedApplication.RegisterUserNotificationSettings(settings);
    UIApplication.SharedApplication.RegisterForRemoteNotifications();
    

    Tras esto, se habilita la compatibilidad con las notificaciones remotas y el registro de inserción de solicitudes.This enables support for remote notifications and requests push registration.

Ahora su aplicación está actualizada para que sea compatible con las notificaciones push.Your app is now updated to support push notifications.

Prueba de las notificaciones push en su aplicación de iOSTest push notifications in your iOS app

  1. Haga clic con el botón derecho en el proyecto de iOS y luego haga clic en Establecer como proyecto de inicio.Right-click the iOS project, and click Set as StartUp Project.

  2. Pulse el botón Ejecutar o presione F5 en Visual Studio para compilar el proyecto e iniciar la aplicación en un dispositivo iOS.Press the Run button or F5 in Visual Studio to build the project and start the app in an iOS device. Luego, haga clic en Aceptar para aceptar las notificaciones de inserción.Then click OK to accept push notifications.

    Nota

    Debe aceptar de forma explícita las notificaciones push desde su aplicación.You must explicitly accept push notifications from your app. Esta solicitud solo se produce la primera vez que se ejecuta la aplicación.This request only occurs the first time that the app runs.

  3. En la aplicación, escriba una tarea y luego haga clic en el icono de signo de suma ( + ).In the app, type a task, and then click the plus (+) icon.

  4. Compruebe que se ha recibido la notificación y luego haga clic en Aceptar para descartarla.Verify that a notification is received, and then click OK to dismiss the notification.

Configuración y ejecución de proyectos de Windows (opcional)Configure and run Windows projects (optional)

Esta sección está dedicada a la ejecución de los proyectos WinApp y WinPhone81 de Xamarin.Forms para dispositivos Windows.This section is for running the Xamarin.Forms WinApp and WinPhone81 projects for Windows devices. Estos pasos también son compatibles con los proyectos de Plataforma universal de Windows (UWP).These steps also support Universal Windows Platform (UWP) projects. Puede omitir esta sección si no está trabajando con dispositivos Windows.You can skip this section if you are not working with Windows devices.

Registro de la aplicación de Windows para notificaciones de inserción en el Servicio de notificaciones de Windows (WNS)Register your Windows app for push notifications with Windows Notification Service (WNS)

  1. En el Explorador de soluciones de Visual Studio, haga clic con el botón derecho en el proyecto de la aplicación de la Tienda Windows.In Visual Studio Solution Explorer, right-click the Windows Store app project. A continuación, seleccione Tienda > Asociar aplicación con la Tienda.Then select Store > Associate App with the Store.

    Asociar aplicación con la Tienda Windows

  2. En el asistente, seleccione Siguiente.In the wizard, select Next. Luego, inicie sesión con su cuenta de Microsoft.Then sign in with your Microsoft account. En Reserve un nuevo nombre de aplicación, escriba un nombre para la aplicación y seleccione Reservar.In Reserve a new app name, type a name for your app, and then select Reserve.

  3. Después de crear correctamente el registro de la aplicación, seleccione el nuevo nombre de la aplicación.After the app registration is successfully created, select the new app name. Seleccione Siguiente y después Asociar.Select Next, and then select Associate. Este proceso agrega la información de registro necesaria de la Tienda Windows al manifiesto de aplicación.This process adds the required Windows Store registration information to the application manifest.

  4. Repita los pasos 1 y 3 para el proyecto de aplicación de la Tienda de Windows Phone con el mismo registro que creó anteriormente para la aplicación de la Tienda Windows.Repeat steps 1 and 3 for the Windows Phone Store app project by using the same registration you previously created for the Windows Store app.

  5. Vaya al Centro de desarrollo de Windows e inicie sesión con su cuenta de Microsoft.Go to the Windows Dev Center, and then sign in with your Microsoft account. En Mis aplicaciones, seleccione el nuevo registro de aplicación.In My apps, select the new app registration. A continuación, expanda Servicios > Notificaciones push.Then expand Services > Push notifications.

  6. En la página Notificaciones push, en Windows Push Notification Services (WNS) y Microsoft Azure Mobile Apps, seleccione el sitio de Servicios Live.On the Push notifications page, under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps, select Live Services site. Tome nota de los valores de SID del paquete y el valor actual de Secreto de aplicación.Make a note of the values of the Package SID and the current value in Application Secret.

    Configuración de la aplicación en el Centro para desarrolladores

    Importante

    El secreto de aplicación y el SID del paquete son credenciales de seguridad importantes.The application secret and package SID are important security credentials. No comparta estos valores con nadie ni los distribuya con su aplicación.Don't share these values with anyone or distribute them with your app.

Configuración del Centro de notificaciones para WNSConfigure the notification hub for WNS

  1. En Azure Portal, seleccione Examinar todo > App Services.In the Azure portal, select Browse All > App Services. A continuación, seleccione el back-end de Mobile Apps.Then select your Mobile Apps back end. En Configuración, seleccione App Service Push.Under Settings, select App Service Push. A continuación, seleccione el nombre del centro de notificaciones.Then select your notification hub name.

  2. Vaya a Windows (WNS) .Go to Windows (WNS). Escriba la Clave de seguridad (secreto de cliente) y el SID del paquete que ha obtenido en el sitio de Servicios Live.Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. Luego, seleccione Guardar.Next, select Save.

    Establecimiento de la clave de WNS en el portal

El back-end ahora está configurado para usar WNS para enviar notificaciones push.Your back end is now configured to use WNS to send push notifications.

Incorporación de notificaciones push a la aplicación de WindowsAdd push notifications to your Windows app

  1. En Visual Studio, abra App.xaml.cs en un proyecto de Windows y agregue las siguiente instrucciones.In Visual Studio, open App.xaml.cs in a Windows project, and add the following statements.

    using Newtonsoft.Json.Linq;
    using Microsoft.WindowsAzure.MobileServices;
    using System.Threading.Tasks;
    using Windows.Networking.PushNotifications;
    using <your_TodoItemManager_portable_class_namespace>;
    

    Reemplace <your_TodoItemManager_portable_class_namespace> por el espacio de nombres del proyecto portable que contiene la clase TodoItemManager.Replace <your_TodoItemManager_portable_class_namespace> with the namespace of your portable project that contains the TodoItemManager class.

  2. En App.xaml.cs, agregue el siguiente método InitNotificationsAsync:In App.xaml.cs, add the following InitNotificationsAsync method:

    private async Task InitNotificationsAsync()
    {
        var channel = await PushNotificationChannelManager
            .CreatePushNotificationChannelForApplicationAsync();
    
        const string templateBodyWNS =
            "<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(messageParam)</text></binding></visual></toast>";
    
        JObject headers = new JObject();
        headers["X-WNS-Type"] = "wns/toast";
    
        JObject templates = new JObject();
        templates["genericMessage"] = new JObject
        {
            {"body", templateBodyWNS},
            {"headers", headers} // Needed for WNS.
        };
    
        await TodoItemManager.DefaultManager.CurrentClient.GetPush()
            .RegisterAsync(channel.Uri, templates);
    }
    

    Este método obtiene el canal de notificaciones de inserción y registra una plantilla para recibir notificaciones de plantilla desde el centro de notificaciones.This method gets the push notification channel, and registers a template to receive template notifications from your notification hub. Se entregará a este cliente una notificación de plantilla que admita messageParam .A template notification that supports messageParam will be delivered to this client.

  3. En App.xaml.cs, actualice la definición de método del controlador de eventos OnLaunched agregando el modificador async.In App.xaml.cs, update the OnLaunched event handler method definition by adding the async modifier. Luego, agregue la siguiente línea de código al final del método:Then add the following line of code at the end of the method:

    await InitNotificationsAsync();
    

    Esto garantiza que se creará o actualizará el registro de notificaciones de inserción cada vez que se inicie la aplicación.This ensures that the push notification registration is created or refreshed every time the app is launched. Es importante hacer esto para garantizar que el canal de inserción WNS siempre esté activo.It's important to do this to guarantee that the WNS push channel is always active.

  4. En el Explorador de soluciones de Visual Studio, abra el archivo Package.appxmanifest y establezca Capacidad de aviso en en Notificaciones.In Solution Explorer for Visual Studio, open the Package.appxmanifest file, and set Toast Capable to Yes under Notifications.

  5. Compile la aplicación y compruebe que no haya errores.Build the app and verify you have no errors. La aplicación cliente ahora debe registrarse para las notificaciones de plantilla desde el back-end de Mobile Apps.Your client app should now register for the template notifications from the Mobile Apps back end. Repita esta sección para cada proyecto de Windows de la solución.Repeat this section for every Windows project in your solution.

Prueba de las notificaciones push en su aplicación de WindowsTest push notifications in your Windows app

  1. En Visual Studio, haga clic con el botón derecho en un proyecto de Windows y luego haga clic en Establecer como proyecto de inicio.In Visual Studio, right-click a Windows project, and click Set as startup project.
  2. Presione el botón Run para compilar el proyecto e iniciar la aplicación.Press the Run button to build the project and start the app.
  3. En la aplicación, escriba un nombre para un nuevo todoitem y haga clic en el icono del signo más ( + ) para agregarlo.In the app, type a name for a new todoitem, and then click the plus (+) icon to add it.
  4. Compruebe que se recibe una notificación cuando se agrega el artículo.Verify that a notification is received when the item is added.

Pasos siguientesNext steps

Puede obtener más información sobre las notificaciones de inserción:You can learn more about push notifications:

También puede continuar con uno de los siguientes tutoriales:You can also continue on to one of the following tutorials: