Incorporación de notificaciones push a la aplicación de Xamarin.Forms

Información general

En este tutorial, agregará las notificaciones de inserción a todos los proyectos resultantes del inicio rápido de Xamarin.Forms. Esto significa que se envía una notificación de inserción a todos los clientes multiplataforma cada vez que se inserta un registro.

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

Prerrequisitos

Para iOS, necesitará una suscripción de Apple Developer Program y un dispositivo de iOS físico. El simulador de iOS no admite notificaciones de inserción.

Configuración de un Centro de notificaciones

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

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

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

    Configurar un centro

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

Actualización del proyecto de servidor para enviar notificaciones push

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. Este proceso funciona con la característica de plantillas de Azure Notification Hubs, que permite inserciones multiplataforma. 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.

Elija uno de los procedimientos siguientes que coincidan con el tipo de proyecto back-end, ya sea back-end de .NET o Node.js back-end.

Proyecto de back-end de .NET

  1. En Visual Studio, haga clic con el botón derecho en el proyecto de servidor. A continuación, seleccione Administrar paquetes NuGet. Busque Microsoft.Azure.NotificationHubs y, después, seleccione Instalar. Este proceso instala la biblioteca de Notification Hubs para enviar notificaciones desde el back-end.

  2. En el proyecto de servidor, abra Controllers>TodoItemController.cs. Luego, agregue las siguientes instrucciones using:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. En el método PostTodoItem, agregue el código siguiente después de la llamada a InsertAsync:

    // Get the settings for the server project.
    HttpConfiguration config = this.Configuration;
    MobileAppSettingsDictionary settings =
        this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();
    
    // Get the Notification Hubs credentials for the mobile app.
    string notificationHubName = settings.NotificationHubName;
    string notificationHubConnection = settings
        .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;
    
    // Create 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.

  4. Vuelva a publicar el proyecto de servidor.

Proyecto de back-end de Node.js

  1. Configure el proyecto de back-end.

  2. Reemplace el código existente en el archivo todoitem.js por el siguiente:

    var azureMobileApps = require('azure-mobile-apps'),
    promises = require('azure-mobile-apps/src/utilities/promises'),
    logger = require('azure-mobile-apps/src/logger');
    
    var table = azureMobileApps.table();
    
    table.insert(function (context) {
    // For more information about the Notification Hubs JavaScript SDK,
    // see https://aka.ms/nodejshubs.
    logger.info('Running TodoItem.insert');
    
    // Define the 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.

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

Configuración y ejecución del proyecto de Android (opcional)

Complete esta sección para habilitar las notificaciones push para el proyecto Droid de Xamarin.Forms para Android.

Habilitar la mensajería en la nube Firebase (FCM)

  1. Inicie sesión en la consola Firebase. Si aún no tiene uno, cree un nuevo proyecto de Firebase.

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

    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:

    1. En Nombre del paquete de Android, copie el valor de su applicationId en el archivo build.gradle de la aplicación. En este ejemplo, es com.fabrikam.fcmtutorial1app.

      Especifique el nombre del paquete.

    2. Seleccione Registrar aplicación.

  4. Seleccione Descargar google-services.json, guarde el archivo en la carpeta app del proyecto y, a continuación, seleccione Siguiente.

    Descargue el archivo google-services.json.

  5. Haga que los siguientes cambios de configuración en el proyecto en Android Studio.

    1. En el archivoproject-level build.gradle (<project>/build.gradle), agregue la siguiente instrucción a la sección de dependencias.

      classpath 'com.google.gms:google-services:4.0.1'
      
    2. En el archivo build.gradle de nivel de aplicación (<project>/<app-module>/build.gradle), agregue las siguientes instrucciones a la sección de dependencias.

      implementation 'com.google.firebase:firebase-core:16.0.8'
      implementation 'com.google.firebase:firebase-messaging:17.3.4'
      
    3. Agregue la siguiente línea al final del archivo app-level build.gradle después de la sección de dependencias.

      apply plugin: 'com.google.gms.google-services'
      
    4. Seleccione Sinc Now (Sincronizar ahora) en la barra de herramientas.

      cambios de configuración de build.gradle

  6. Seleccione Next (Siguiente).

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

    Omita el último paso.

  8. En la consola Firebase, seleccione el icono de la rueda dentada del proyecto. Luego, seleccione Project Settings (Configuración del proyecto).

    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.

  10. Cambie a la pestaña Cloud Messaging de la parte superior.

  11. Copie y guarde la clave del servidor para su uso posterior. Usará este valor para configurar el concentrador.

Configuración del back-end de Mobile Apps para enviar solicitudes push mediante FCM

  1. En Azure Portal, seleccione Examinar todo>App Services. A continuación, seleccione el back-end de Mobile Apps.
  2. En Configuración, seleccione Insertar. A continuación, seleccione Configurar servicios de notificación de inserción.
  3. Vaya a Google (GCM). Escriba la clave del servidor heredado FCM obtenida en la consola de Firebase y, luego, seleccione Guardar.

El servicio ahora está configurado para trabajar con Firebase Cloud Messaging.

Incorporación de notificaciones push al proyecto de Android

Con el back-end configurado con FCM, puede agregar componentes y códigos al cliente para registrar con 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.

  1. En el proyecto Droid , haga clic con el botón derecho en Referencias > administrar paquetes NuGet ....
  2. En la ventana del Administrador de paquetes NuGet, busque el paquete Xamarin.Firebase.Messaging y agréguelo al proyecto.
  3. En las propiedades del proyecto Droid, configure la aplicación para la compilación con la versión Android 7.0 o posterior.
  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. Para más información, consulte Add the Google Services JSON File (Incorporación del archivo JSON de Google Services).

Registro en Firebase Cloud Messaging

  1. Abra el archivo AndroidManifest.xml e inserte los siguientes elementos <receiver> en el elemento <application>:

    <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 Firebase

  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:

    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:

    [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. El método OnTokenRefresh se invoca cuando la aplicación recibe un token de registro de FCM. El método recupera el token de la propiedad FirebaseInstanceId.Instance.Token, que FCM actualiza de forma asincrónica. 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. 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.

    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.

Registro con el centro de notificaciones de Azure

  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:

    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:

    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. Esto garantiza que las notificaciones enviadas desde el centro de notificaciones de Azure se destinan al dispositivo que representa el token de registro.

Visualización del contenido de una notificación push

  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:

    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:

    [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);
            //Unique request code to avoid PendingIntent collision.
            var requestCode = new Random().Next();
            var pendingIntent = PendingIntent.GetActivity(this, requestCode, 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. 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.

Ahora, está listo para probar las notificaciones push en la aplicación que se ejecuta en el emulador o un dispositivo Android.

Prueba de las notificaciones push en la aplicación de Android

Los dos primeros pasos son necesarios solo cuando se realizan pruebas en un emulador.

  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. Para comprobar esto, confirme que las aplicaciones de Play estén instaladas en el dispositivo o emulador.
  2. Para agregar una cuenta de Google al dispositivo Android, haga clic enConfiguración de>aplicaciones>Agregar cuenta. Luego siga las indicaciones para agregar una cuenta de Google existente al dispositivo o para crear una nueva.
  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.
  4. Haga clic en Ejecutar para compilar el proyecto e iniciar la aplicación en el dispositivo Android o el emulador.
  5. En la aplicación, escriba una tarea y luego haga clic en el icono de signo de suma ( + ).
  6. Compruebe que se recibe una notificación cuando se agrega un artículo.

Configuración y ejecución del proyecto de iOS (opcional)

Esta sección trata de la ejecución del proyecto de iOS de Xamarin para dispositivos iOS. Puede omitir esta sección si no está trabajando con dispositivos iOS.

Generación del archivo de solicitud de firma de certificado

El servicio Apple Push Notification Service (APNS) utiliza certificados para autenticar las notificaciones push. Siga estas instrucciones para crear el certificado de inserción necesario para enviar y recibir notificaciones. 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).

Genere el archivo de solicitud de firma de certificado (CSR) que utiliza Apple para generar un certificado push firmado.

  1. En el Mac, ejecute la herramienta Acceso a llaves. Se puede activar desde la carpeta Utilities (Utilidades) o la carpeta Other (Otros) en el panel de inicio.

  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).

    Use Acceso a llaves para solicitar un nuevo certificado

    Nota

    De forma predeterminada, Keychain Access (Acceso con cadena de claves) selecciona el primer elemento de la lista. Esto puede ser un problema si está en la categoría Certificates (Certificados) y Apple Worldwide Developer Relations Certification Authority (Entidad de certificación de Apple Worldwide Developer Relations) no es el primer elemento de la lista. Antes de generar la solicitud de firma de certificado, asegúrese de que tiene un elemento que no sea clave o de que esté seleccionada la clave Apple Worldwide Developer Relations Certification Authority (Entidad de certificación de Apple Worldwide Developer Relations).

  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). Deje en blanco CA Email Address (Dirección de correo de la entidad de certificación), ya que no es obligatorio.

    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).

    Elección de un nombre de archivo para el certificado

    Esta acción guarda el archivo CSR en la ubicación seleccionada. La ubicación predeterminada es Escritorio. Recuerde la ubicación seleccionada para este archivo.

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.

Registro de la aplicación para notificaciones push

Para enviar notificaciones push a una aplicación iOS, registre la aplicación en Apple y también regístrese para el uso de notificaciones push.

  1. Si todavía no ha registrado la aplicación, vaya al portal de aprovisionamiento de iOS en el centro para desarrolladores de Apple. Inicie sesión en el portal con su identificador de Apple y seleccione Identifiers (Identificadores). Luego, seleccione + para registrar una nueva aplicación.

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

  2. En la pantalla Register a New Identifier (Registrar un nuevo identificador), seleccione el botón de radio App IDs (Id. de aplicaciones). Después, seleccione Continuar.

    Portal de aprovisionamiento de iOS: página de registro de un nuevo identificador

  3. Actualice los tres campos siguientes de la nueva aplicación y, después, seleccione Continue (Continuar):

    • Descripción: escriba un nombre descriptivo para la aplicación.

    • Identificador de agrupación: escriba un identificador de agrupación con el formato Identificador de organización.Nombre del producto, como se mencionó en la Guía de distribución de aplicaciones. 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. 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. Asegúrese de que el valor de Bundle Identifier (Identificador de agrupación) coincida con el del proyecto de Xcode para que Xcode use el perfil de publicación correcto.

      Portal de aprovisionamiento de iOS: página de registro del identificador de aplicación

    • Notificaciones push: marque la opción Push Notifications (Notificaciones push) en la sección Capabilities (Capacidades).

      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. Seleccione Continue (Continuar) y, luego, Register (Registrar) para confirmar el nuevo identificador de aplicación.

      Confirmar el nuevo identificador de aplicación

      Tras seleccionar Register, (Registrar), verá el nuevo identificador de aplicación como un elemento de línea en la página Certificates, Identifiers & Profiles (Certificados, identificadores y perfiles).

  4. En esta página , en Identifiers (Identificadores), busque el elemento de línea con el identificador de aplicación que acaba de crear y seleccione su fila para mostrar la pantalla Edit your App ID Configuration (Editar la configuración del id. de aplicación).

Creación de un certificado para Notification Hubs

Para que el centro de notificaciones funcione con APNs, se requiere un certificado. Esto se puede hacer de dos maneras:

  1. Cree un certificado .p12 que se pueda cargar directamente en el centro de notificaciones.
  2. Cree un certificado .p8 que se pueda usar para autenticación basada en tokens (enfoque más reciente).

El enfoque más reciente tiene varias ventajas (en comparación con el uso de certificados), como se documenta en Autenticación basada en token (HTTP/2) para APNs. Sin embargo, se han proporcionado pasos para ambos enfoques.

OPCIÓN 1: Creación de un certificado push .p12 que se pueda cargar directamente en el centro de notificaciones

  1. Desplácese hacia abajo hasta la opción activada Push Notifications (Notificaciones push) y, luego, seleccione Configure (Configurar) para crear el certificado.

    Editar página de identificadores de aplicaciones

  2. Aparece la ventana Apple Push Notification service SSL Certificates (Certificados SSL de Apple Push Notification Service). Seleccione el botón Create Certificate (Crear certificado) en la sección Development SSL Certificate (Certificado SSL de desarrollo).

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

    Se muestra la pantalla Create a new Certificate (Crear un nuevo certificado).

    Nota

    Este tutorial usa un certificado de desarrollo. Se usa el mismo proceso cuando se registra un certificado de producción. Asegúrese de usa el mismo tipo de certificado cuando envíe notificaciones.

  3. Seleccione Choose File (Elegir archivo), vaya a la ubicación donde guardó el archivo CSR de la primera tarea y, después, haga doble clic en el nombre del certificado para cargarlo. Después, seleccione Continuar.

  4. Una vez que el portal cree el certificado, seleccione el botón Download (Descargar). Guarde el certificado y recuerde la ubicación donde se ha guardado.

    Página de descarga de certificados generados

    El certificado se descarga y se guarda en el equipo en la carpeta de descargas.

    Busque el archivo de certificado en la carpeta de descargas

    Nota

    De manera predeterminada, el certificado de desarrollo descargado se denomina aps_development.cer.

  5. Haga doble clic en el certificado de inserción aps_development.cer descargado. Esta operación instala el certificado nuevo en la cadena de llaves, tal como se muestra en la siguiente imagen:

    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).

  6. En Acceso a llaves, haga clic en el nuevo certificado de inserción que creó, en la categoría Certificados . Haga clic en Export (Exportar), asigne un nombre al archivo, seleccione el formato .p12 y, después, haga clic en Save (Guardar).

    Exportación del certificado en formato p12

    De manera opcional, puede decidir proteger el certificado con una contraseña. Haga clic en OK (Aceptar) si quiere omitir la creación de una contraseña. Anote el nombre de archivo y la ubicación del certificado p12 exportado. Se usan para habilitar la autenticación con APNs.

    Nota

    El nombre y la ubicación del archivo .p12 pueden ser diferentes a los que se ilustran en este tutorial.

OPCIÓN 2: Creación de un certificado .p8 que se pueda usar para autenticación basada en tokens

  1. Anote los siguientes datos:

    • App ID Prefix (Prefijo de identificador de aplicación) (es un identificador de equipo)
    • Identificador de lote
  2. De vuelta en Certificates, Identifiers & Profiles (Certificados, identificadores y perfiles), haga clic en Keys (Claves).

    Nota

    Si ya tiene configurada una clave para APNs, puede volver a usar el certificado .p8 que descargó justo después de crearlo. En tal caso, puede omitir los pasos 3 a 5.

  3. Haga clic en el botón + (o en el botón Crear una clave) para crear una nueva clave.

  4. Proporcione un valor de Key Name (Nombre de clave) adecuado, active la opción Apple Push Notifications service (APNs) y, a continuación, haga clic en Continue (Continuar), seguido de Register (Registrar) en la pantalla siguiente.

  5. Haga clic en Download (Descargar) y, a continuación, mueva el archivo .p8 (con el prefijo AuthKey_ ) a un directorio local seguro y, a continuación, haga clic en Done (Listo).

    Nota

    Asegúrese de mantener el archivo .p8 en un lugar seguro (y guardar una copia de seguridad). Después de descargar la clave, no se puede volver a descargar, ya que se quita la copia del servidor.

  6. En Keys (Claves), haga clic en la clave que acaba de crear (o en una clave existente si decide utilizarla en su lugar).

  7. Anote el valor de Key ID (Id. de clave).

  8. Abra el certificado .p8 en una aplicación adecuada, como Visual Studio Code y anote el valor de la clave. Este es el valor que aparece entre -----BEGIN PRIVATE KEY----- y -----END PRIVATE KEY----- .

    -----BEGIN PRIVATE KEY-----
    <key_value>
    -----END PRIVATE KEY-----
    

    Nota

    Este es el valor de token que se usará más adelante para configurar el centro de notificaciones.

Al completar estos pasos, debe tener la siguiente información para usarla más adelante en Configuración de un centro de notificaciones con información de APNs:

  • Identificador de equipo (consulte el paso 1)
  • Identificador de lote (consulte el paso 1)
  • Identificador de clave (consulte el paso 7)
  • Valor de token, es decir, el valor de la clave del certificado .p8 (consulte el paso 8)

Creación de un perfil de aprovisionamiento para la aplicación

  1. Vuelva al portal de aprovisionamiento de iOS, seleccione Certificates, Identifiers & Profiles (Certificados, identificadores y perfiles), seleccione Profiles (Perfiles) en el menú izquierdo y, luego, seleccione + para crear un perfil. Aparece la pantalla Register a New Provisioning Profile (Registrar un nuevo perfil de aprovisionamiento).

  2. En Development (Desarrollo), seleccione iOS App Development (Desarrollo de aplicaciones de iOS) como tipo de perfil de aprovisionamiento y, después, haga clic en Continue (Continuar).

    Lista de perfiles de aprovisionamiento

  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.

    Seleccionar el identificador de la aplicación

  4. En la ventana Select certificates (Seleccionar certificados), seleccione el certificado de desarrollo que se usa para la firma del código y, después, seleccione Continue (Continuar). Este certificado no es el certificado push que creó. Si no hay uno, debe crearlo. Si hay un certificado, vaya al paso siguiente. Para crear un certificado de desarrollo si no existe uno:

    1. Si ve No Certificates are available (No hay certificados disponibles), seleccione Create Certificate(Crear certificado).
    2. En la sección Software, seleccione Apple Development (Desarrollo de Apple). Después, seleccione Continuar.
    3. En la pantalla Create a new Certificate (Crear un nuevo certificado), seleccione Choose File (Elegir archivo).
    4. Vaya al certificado Certificate Signing Request (Solicitud de firma de certificado), selecciónelo y, luego, elija Open (Abrir).
    5. Seleccione Continuar.
    6. Descargue el certificado de desarrollo y recuerde la ubicación donde se ha guardado.
  5. Vuelva a la página Certificates, Identifiers & Profiles (Certificados, identificadores y perfiles), seleccione Profiles (Perfiles) en el menú izquierdo y, luego, seleccione + para crear un perfil. Aparece la pantalla Register a New Provisioning Profile (Registrar un nuevo perfil de aprovisionamiento).

  6. En la ventana Select certificates (Seleccionar certificados), seleccione el certificado de desarrollo que acaba de crear. Después, seleccione Continuar.

  7. Después, seleccione en los dispositivos que va a usar para la prueba y seleccione Continue (Continuar).

  8. Para terminar, elija un nombre para el perfil en Provisioning Profile Name (Nombre del perfil de aprovisionamiento) y seleccione Generate (Generar).

    Elegir el nombre del perfil de aprovisionamiento

  9. Cuando se cree el perfil de aprovisionamiento, seleccione Download (Descargar). Recuerde la ubicación donde se ha guardado.

  10. Vaya a la ubicación del perfil de aprovisionamiento y haga doble clic en él para instalarlo en la máquina de desarrollo de Xcode.

Creación de un centro de notificaciones

En esta sección, va a crear un centro de notificaciones y configurar la autenticación con APNs mediante el certificado push .p12 o autenticación basada en tokens. Si desea usar un centro de notificaciones ya creado, puede omitir los pasos hasta el paso 5.

  1. Inicie sesión en Azure Portal.

  2. Seleccione Todos los servicios en el menú de la izquierda y seleccione Notification Hubs en la sección Móvil. Seleccione el icono de estrella junto al nombre del servicio para agregarlo a la sección FAVORITOS en el menú de la izquierda. Cuando se agrega Notification Hubs a FAVORITOS, selecciónelo en el menú de la izquierda.

    Azure Portal: selección de Notification Hubs

  3. En la página Notification Hubs, seleccione Agregar en la barra de herramientas.

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

  4. En la página Notification Hubs, realice los pasos siguientes:

    1. Escriba un nombre en el centro de notificaciones.

    2. Escriba un nombre en Crear un nuevo espacio de nombres. Un espacio de nombres contiene uno o más centros.

    3. Seleccione un valor en el cuadro de lista desplegable Ubicación. Este valor especifica la ubicación en la que quiere crear el centro.

    4. Seleccione un grupo de recursos existente en Grupo de recursos o cree un nombre para el nuevo grupo.

    5. Seleccione Crear.

      Azure Portal: establecimiento de las propiedades del centro de notificaciones

  5. Seleccione Notificaciones (el icono de campana) y, luego, Ir al recurso. También puede actualizar la lista en la página Notification Hubs y seleccionar su centro.

    Azure Portal - notificaciones -> Ir al recurso

  6. Seleccione Directivas de acceso en la lista. Observe que las dos cadenas de conexión están disponibles. Las necesitará más adelante para gestionar las notificaciones push.

    Importante

    No use la directiva DefaultFullSharedAccessSignature en la aplicación. Está pensada para usarse solamente en el back-end.

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

Configuración de un centro de notificaciones con información de APNs

En Notification Services (Servicios de notificación), seleccione Apple (APNS) y siga los pasos adecuados en función del enfoque elegido anteriormente en la sección Creación de un certificado para Notification Hubs.

Nota

Use Production (Producción) como Application Mode (Modo de aplicación) solo si desea enviar notificaciones push a los usuarios que compraron la aplicación en la tienda.

OPCIÓN 1: Uso de un certificado push .p12

  1. Seleccione Certificado.

  2. Seleccione el icono del archivo.

  3. Seleccione el archivo .p12 que exportó antes y, luego, Open (Abrir).

  4. Si es necesario, especifique la contraseña correcta.

  5. Seleccione el modo Espacio aislado.

    Configuración del certificado de APNs en Azure Portal

  6. Seleccione Guardar.

OPCIÓN 2: Uso de autenticación basada en tokens

  1. Seleccione Token.

  2. Escriba los siguientes valores adquiridos anteriormente:

    • Identificador de clave
    • Identificador de lote
    • Identificador de equipo
    • Token
  3. Seleccione Sandbox (Espacio aislado).

  4. Seleccione Guardar.

Ahora ya ha configurado el centro de notificaciones con APNs. Tiene también la cadena de conexión para registrar la aplicación y enviar notificaciones push.

Configuración del Centro de notificaciones para APNS

  1. En el equipo Mac, inicie Acceso a llaves. En la barra de navegación izquierda, en Categoría, abra Mis certificados. Busque el certificado SSL que descargó en la sección anterior y muestre su contenido. Seleccione solo el certificado (no seleccione la clave privada). A continuación, expórtelo.
  2. En Azure Portal, seleccione Examinar todo>App Services. A continuación, seleccione el back-end de Mobile Apps.
  3. En Configuración, seleccione App Service Push. A continuación, seleccione el nombre del centro de notificaciones.
  4. Vaya a Apple Push Notification ServicesUpload Certificate (Cargar certificado de Apple Push Notification Services>). Cargue el archivo .p12, seleccionando el modo correcto (en función de si el certificado SSL de cliente anterior es de producción o espacio aislado). Guarde los cambios.

El servicio ahora está configurado para trabajar con las notificaciones push en iOS.

A continuación, realizará la configuración del proyecto de iOS en Xamarin Studio o Visual Studio.

Configuración del proyecto de iOS en Xamarin Studio

  1. En Xamarin.Studio, abra Info.plist y actualice el identificador de agrupación con el identificador de lote que creó anteriormente con el nuevo identificador de aplicación.

  2. Desplácese hacia abajo hasta Background Modes (Modos en segundo plano). Active la casilla Enable Background Modes (Habilitar modos en segundo plano) y la casilla Remote notifications (Notificaciones remotas).

  3. Haga doble clic en el proyecto en el Panel de soluciones para abrir las opciones de proyecto.

  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.

    De esta forma, se garantiza que el proyecto usa el nuevo perfil para la firma de código. Para ver la documentación oficial de aprovisionamiento de dispositivos Xamarin, consulte Aprovisionamiento de dispositivos Xamarin.

Configuración del proyecto de iOS en Visual Studio

  1. En Visual Studio, haga clic con el botón derecho en el proyecto y después haga clic en Propiedades.

  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.

  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.

    De esta forma, se garantiza que el proyecto usa el nuevo perfil para la firma de código. Para ver la documentación oficial de aprovisionamiento de dispositivos Xamarin, consulte Aprovisionamiento de dispositivos Xamarin.

  4. Haga doble clic en Info.plist para abrirlo y, a continuación, habilite RemoteNotifications en Background Modes (Modos en segundo plano).

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

  1. En el proyecto iOS, abra AppDelegate.cs y agregue la siguiente instrucción en la parte superior del archivo de código.

    using Newtonsoft.Json.Linq;
    
  2. En la clase AppDelegate, agregue una invalidación para el evento RegisteredForRemoteNotifications con el fin de registrar las notificaciones:

    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:

    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.

  4. En la clase AppDelegate, agregue el siguiente código al método FinishedLaunching:

    // 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.

Ahora su aplicación está actualizada para que sea compatible con las notificaciones push.

Prueba de las notificaciones push en su aplicación de iOS

  1. Haga clic con el botón derecho en el proyecto de iOS y luego haga clic en Establecer como proyecto de inicio.

  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. Luego, haga clic en Aceptar para aceptar las notificaciones de inserción.

    Nota

    Debe aceptar de forma explícita las notificaciones push desde su aplicación. Esta solicitud solo se produce la primera vez que se ejecuta la aplicación.

  3. En la aplicación, escriba una tarea y luego haga clic en el icono de signo de suma ( + ).

  4. Compruebe que se ha recibido la notificación y luego haga clic en Aceptar para descartarla.

Configuración y ejecución de proyectos de Windows (opcional)

Esta sección está dedicada a la ejecución de los proyectos WinApp y WinPhone81 de Xamarin.Forms para dispositivos Windows. Estos pasos también son compatibles con los proyectos de Plataforma universal de Windows (UWP). Puede omitir esta sección si no está trabajando con dispositivos Windows.

Registro de la aplicación de Windows para notificaciones de inserción en el Servicio de notificaciones de Windows (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. A continuación, seleccione>Asociar aplicación a la Tienda con la Tienda.

    Asociar aplicación con la Tienda Windows

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

  3. Después de crear correctamente el registro de la aplicación, seleccione el nuevo nombre de la aplicación. Seleccione Siguiente y después Asociar. Este proceso agrega la información de registro necesaria de la Tienda Windows al manifiesto de aplicación.

  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.

  5. Vaya al Centro de desarrollo de Windows e inicie sesión con su cuenta de Microsoft. En Mis aplicaciones, seleccione el nuevo registro de aplicación. A continuación, expandaNotificaciones pushde servicios>.

  6. En la página Notificaciones push, en Servicios de notificaciones push de Windows (WNS) y Microsoft Azure Mobile Apps, seleccione Servicios Live sitio. Anote los valores del SID del paquete y el valor actual en Secreto de aplicación.

    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. No comparta estos valores con nadie ni los distribuya con su aplicación.

Configuración del Centro de notificaciones para WNS

  1. En Azure Portal, seleccione Examinar todo>App Services. A continuación, seleccione el back-end de Mobile Apps. En Configuración, seleccione App Service Push. A continuación, seleccione el nombre del centro de notificaciones.

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

    Establecimiento de la clave de WNS en el portal

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

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

  1. En Visual Studio, abra App.xaml.cs en un proyecto de Windows y agregue las siguiente instrucciones.

    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.

  2. En App.xaml.cs, agregue el siguiente método InitNotificationsAsync :

    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. Se entregará a este cliente una notificación de plantilla que admita messageParam .

  3. En App.xaml.cs, actualice la definición de método del controlador de eventos OnLaunched agregando el modificador async. Luego, agregue la siguiente línea de código al final del método:

    await InitNotificationsAsync();
    

    Esto garantiza que se creará o actualizará el registro de notificaciones de inserción cada vez que se inicie la aplicación. Es importante hacer esto para garantizar que el canal de inserción WNS siempre esté activo.

  4. En Explorador de soluciones para Visual Studio, abra el archivo Package.appxmanifest y establezca Toast Capable en en Notificaciones.

  5. Compile la aplicación y compruebe que no haya errores. La aplicación cliente ahora debe registrarse para las notificaciones de plantilla desde el back-end de Mobile Apps. Repita esta sección para cada proyecto de Windows de la solución.

Prueba de las notificaciones push en su aplicación de Windows

  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.
  2. Presione el botón Ejecutar para compilar el proyecto e iniciar la aplicación.
  3. En la aplicación, escriba un nombre para un nuevo todoitem y, a continuación, haga clic en el icono más (+) para agregarlo.
  4. Compruebe que se recibe una notificación cuando se agrega el artículo.

Pasos siguientes

Puede obtener más información sobre las notificaciones de inserción:

También puede continuar con uno de los siguientes tutoriales: