Incorporación de notificaciones push a la aplicación apache Cordova

2019-06-25

Información general

En este tutorial, agregará notificaciones push al inicio rápido de Apache Cordova proyecto para que se envíe una notificación push al dispositivo cada vez que se inserte un registro.

Si no usa el proyecto de servidor de inicio rápido descargado, necesita el paquete de extensión de notificación push. Para obtener más información, consulte Trabajar con el SDK de servidor back-end de .NET para Aplicaciones Móviles.

Prerrequisitos

En este tutorial se supone que tiene una aplicación de Apache Cordova que se desarrolló con Visual Studio 2015. Este dispositivo debe ejecutarse en Google Android Emulator, un dispositivo Android, un dispositivo Windows o un dispositivo iOS.

Para completar este tutorial, necesita lo siguiente:

Un PC con Visual Studio Community 2015 o posterior
Visual Studio Tools para Apache Cordova
Una cuenta de Azure activa
Un proyecto de inicio rápido completado Apache Cordova
(Android) Una cuenta de Google con una dirección de correo electrónico verificada
(iOS) Una membresía en el Programa para Desarrolladores de Apple y un dispositivo iOS (el simulador de iOS no admite notificaciones automáticas)
(Windows) Una cuenta de desarrollador de Microsoft Store y un dispositivo Windows 10

Configuración de un centro de notificaciones

La función Mobile Apps de Azure App Service usa Azure Notification Hubs para enviar notificaciones push, por lo tanto, configurarás un centro de notificaciones para su aplicación móvil.

En Azure Portal, vaya a App Servicesy, a continuación, seleccione el back-end de la aplicación. En Configuración, seleccione Push.
Para agregar un recurso del centro de notificaciones a la aplicación, seleccionar Connect. Puede crear un centro o conectarse a uno existente.

Ahora ha conectado un centro de notificaciones al proyecto de back-end de Mobile Apps. Más adelante, configure este centro de notificaciones para conectarse a un sistema de notificaciones de plataforma (PNS) para insertar en los dispositivos.

Vea un vídeo en el que se muestran los pasos de esta sección.

Actualización del proyecto de servidor

En esta sección, actualizará el código del proyecto de back-end de Mobile Apps existente para enviar una notificación push cada vez que se agregue un nuevo elemento. Este proceso se basa en la característica de plantilla de Azure Notification Hubs, que permite notificaciones multiplataforma. Los distintos clientes se registran para las notificaciones push mediante plantillas, y una única notificación universal puede alcanzar a todas las plataformas cliente.

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

Proyecto back-end de .NET

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.NotificationHubsy seleccione Instalar. Este proceso instala la biblioteca de Notification Hubs para enviar notificaciones desde el back-end.
En el proyecto de servidor, abra controladores>TodoItemController.cs. A continuación, agregue las siguientes instrucciones using:
```
using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;
```

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 item.Text cuando se inserta un nuevo elemento.

Vuelva a publicar el proyecto de servidor.

Proyecto de back-end con Node.js

Configure el proyecto de back-end.

Reemplace el código existente en todoitem.js por el código 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 item.text cuando se inserta un nuevo elemento.

Al editar el archivo en el equipo local, vuelva a publicar el proyecto de servidor.

Modificación de la aplicación Cordova

Para asegurarse de que el proyecto de aplicación de Apache Cordova está listo para controlar las notificaciones push, instale el complemento de inserción de Cordova más los servicios de inserción específicos de la plataforma.

Actualice la versión de Cordova en el proyecto.

Si el proyecto usa una versión de Apache Cordova anterior a la versión 6.1.1, actualice el proyecto de cliente. Para actualizar el proyecto, siga estos pasos:

Para abrir el diseñador de configuración, haga clic con el botón derecho en config.xml.
Seleccione la pestaña plataformas.
En el cuadro de texto CLI de Cordova, seleccione 6.1.1.
Para actualizar el proyecto, seleccione Compilary, a continuación, seleccione Generar solución.

Instala el complemento push

Las aplicaciones de Apache Cordova no controlan de forma nativa las funcionalidades de dispositivo o red. Estas capacidades se proporcionan mediante plugins que se publican en npm o en GitHub. El complemento phonegap-plugin-push controla las notificaciones push de red.

Puede instalar el complemento de inserción de una de las maneras siguientes:

Desde la consola de comandos:

Ejecute el siguiente comando:

cordova plugin add phonegap-plugin-push

Desde dentro de Visual Studio:

En el Explorador de soluciones, abra el archivo config.xml. A continuación, seleccione Plugins>Custom. A continuación, seleccione git como origen de instalación.
Escriba https://github.com/phonegap/phonegap-plugin-push como origen.
Seleccione la flecha situada junto al origen de instalación.
En SENDER_ID, si ya tiene un identificador de proyecto numérico para el proyecto de Google Developer Console, puede agregarlo aquí. De lo contrario, escriba un valor de marcador de posición, como 777777. Si tiene como destino Android, puede actualizar este valor en el archivo config.xml más adelante.

Nota:

A partir de la versión 2.0.0, google-services.json debe instalarse en la carpeta raíz del proyecto para configurar el identificador del remitente. Para obtener más información, consulte la documentación de instalación de .
Selecciona Agregar.

El complemento push ya está instalado.

Instalación del complemento de dispositivo

Siga el mismo procedimiento que usó para instalar el complemento de inserción. Agregue el complemento Dispositivo de la lista de complementos principales. (Para encontrarlo, seleccione Plugins>Core). Necesita este complemento para obtener el nombre de la plataforma.

Registrar el dispositivo cuando se inicia la aplicación

Inicialmente, se incluye código mínimo para Android. Más adelante puede modificar la aplicación para que se ejecute en iOS o Windows 10.

Agregue una llamada a registerForPushNotifications durante el callback para el proceso de inicio de sesión. Como alternativa, puede agregarlo en la parte inferior del método onDeviceReady:

// Log in to the service.
client.login('google')
    .then(function () {
        // Create a table reference.
        todoItemTable = client.getTable('todoitem');

        // Refresh the todoItems.
        refreshDisplay();

        // Wire up the UI Event Handler for the Add Item.
        $('#add-item').submit(addItemHandler);
        $('#refresh').on('click', refreshDisplay);

            // Added to register for push notifications.
        registerForPushNotifications();

    }, handleError);

En este ejemplo se muestra la llamada a registerForPushNotifications después de que la autenticación se realice correctamente. Puede llamar a registerForPushNotifications() tantas veces como sea necesario.

Agregue el nuevo método registerForPushNotifications de la siguiente manera:

// Register for push notifications. Requires that phonegap-plugin-push be installed.
var pushRegistration = null;
function registerForPushNotifications() {
    pushRegistration = PushNotification.init({
        android: { senderID: 'Your_Project_ID' },
        ios: { alert: 'true', badge: 'true', sound: 'true' },
        wns: {}
    });

// Handle the registration event.
pushRegistration.on('registration', function (data) {
    // Get the native platform of the device.
    var platform = device.platform;
    // Get the handle returned during registration.
    var handle = data.registrationId;
    // Set the device-specific message template.
    if (platform == 'android' || platform == 'Android') {
        // Register for GCM notifications.
        client.push.register('gcm', handle, {
            mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'iOS') {
        // Register for notifications.
        client.push.register('apns', handle, {
            mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'windows') {
        // Register for WNS notifications.
        client.push.register('wns', handle, {
            myTemplate: {
                body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                headers: { 'X-WNS-Type': 'wns/toast' } }
        });
    }
});

pushRegistration.on('notification', function (data, d2) {
    alert('Push Received: ' + data.message);
});

pushRegistration.on('error', handleError);
}

(Android) En el código anterior, reemplace Your_Project_ID por el ID de proyecto numérico para tu app de la Google Developer Console.

(Opcional) Configuración y ejecución de la aplicación en Android

Complete esta sección para habilitar las notificaciones push para Android.

Habilitación de Firebase Cloud Messaging

Puesto que el destino es la plataforma Android de Google inicialmente, debe habilitar Firebase Cloud Messaging.

Inicie sesión en la consola Firebase. Si aún no tiene uno, cree un nuevo proyecto de Firebase.
Después de crear el proyecto, seleccione Add Firebase to your Android app (Añade Firebase a tu aplicación de Android).
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.
2. Seleccione Registrar aplicación.
Seleccione Descargar google-services.json, guarde el archivo en la carpeta app del proyecto y, a continuación, seleccione Siguiente.
Realice los siguientes cambios de configuración a su 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.
Seleccione Siguiente.
Seleccione Skip this step (Omitir este paso).
En la consola Firebase, seleccione el icono de la rueda dentada del proyecto. Luego, seleccione Project Settings (Configuración del proyecto).
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.
Cambie a la pestaña Cloud Messaging de la parte superior.
Copie y guarde la clave del servidor para su uso posterior. Usas este valor para configurar el concentrador.

Configura el back-end de la aplicación móvil para enviar notificaciones push mediante FCM

En el portal de Azure, seleccione Examinar todo>App Services. A continuación, seleccione el back-end de Mobile Apps.
En Configuración, seleccione Enviar. A continuación, seleccione Configurar servicios de notificaciones push.
Vaya a Google (GCM). Escriba la clave del servidor heredado de FCM que obtuvo en la consola de Firebase y, a continuación, seleccione Guardar.

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

Configuración de la aplicación Cordova para Android

En la aplicación Cordova, abra config.xml. A continuación, reemplace Your_Project_ID por el identificador numérico de proyecto de la aplicación desde la consola de desarrollador de Google .

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

Abra index.js. A continuación, actualice el código para usar el identificador numérico del proyecto.

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

Configura tu dispositivo Android para la depuración USB

Antes de poder implementar su aplicación en su dispositivo Android, debe habilitar la depuración USB. Siga estos pasos en el teléfono Android:

Vaya a Configuración>Acerca del teléfono. A continuación, pulse el número de compilación hasta que el modo de desarrollador esté habilitado (aproximadamente siete veces).
De nuevo en Configuración>Opciones para desarrolladores, habilite depuración USB. A continuación, conecte el teléfono Android al equipo de desarrollo con un cable USB.

Lo probamos con un dispositivo Google Nexus 5X que ejecuta Android 6.0 (Marshmallow). Sin embargo, las técnicas son comunes en cualquier versión moderna de Android.

Instalación de Google Play Services

El plugin de notificaciones push se basa en los Servicios de Google Play en Android para las notificaciones push.

En Visual Studio, seleccione Tools>Android>Android SDK Manager. A continuación, expanda la carpeta Extras. Active las casillas adecuadas para asegurarse de que se instala cada uno de los siguientes SDK:
- Android 2.3 o superior
- Revisión 27 o posterior del repositorio de Google
- Google Play Services 9.0.2 o superior
Seleccione Instalar paquetes. A continuación, espere a que finalice la instalación.

Las bibliotecas actualmente necesarias se enumeran en la documentación de instalación del complemento phonegap-plugin-push.

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

Ahora puede probar las notificaciones push ejecutando la aplicación e insertando elementos en la tabla TodoItem. Puede probar desde el mismo dispositivo o desde un segundo dispositivo, siempre y cuando use el mismo back-end. Pruebe la aplicación Cordova en la plataforma Android de una de las maneras siguientes:

En un dispositivo físico: Conecte el dispositivo Android al equipo de desarrollo con un cable USB. En lugar de Google Android Emulator, seleccione Dispositivo. Visual Studio implementa la aplicación en el dispositivo y ejecuta la aplicación. Después, puede interactuar con la aplicación en el dispositivo.

Las aplicaciones de uso compartido de pantalla como Mobizen pueden ayudarle a desarrollar aplicaciones Android. Mobizen proyecta su pantalla Android en un navegador web en su PC.
En un emulador de Android: Hay pasos de configuración adicionales necesarios cuando se usa un emulador.

Asegúrese de que va a implementar en un dispositivo virtual que tenga las API de Google establecidas como destino, como se muestra en el administrador de dispositivos virtuales Android (AVD).

Si quiere usar un emulador x86 más rápido, instalar el controlador HAXMy, a continuación, configurar el emulador para usarlo.

Agregue una cuenta de Google al dispositivo Android seleccionando Apps>Configuración>Agregar cuenta. A continuación, siga las indicaciones.

Ejecute la aplicación todolist como antes e inserte un nuevo elemento de tareas pendientes. Esta vez, se muestra un icono de notificación en el área de notificación. Puede abrir el cajón de notificaciones para ver el texto completo de la notificación.

(Opcional) Configuración y ejecución en iOS

Esta sección es para ejecutar el proyecto cordova en dispositivos iOS. Si no está trabajando con dispositivos iOS, puede omitir esta sección.

Instalación y ejecución del agente de compilación remoto de iOS en un servicio mac o en la nube

Para poder ejecutar una aplicación cordova en iOS mediante Visual Studio, siga los pasos descritos en la guía de configuración de iOS para instalar y ejecutar el agente de compilación remoto.

Asegúrese de que puede compilar la aplicación para iOS. Los pasos de la guía de configuración son necesarios para compilar la aplicación para iOS desde Visual Studio. Si no tiene un equipo Mac, puede compilar para iOS mediante el agente de compilación remoto en un servicio como MacInCloud. Para obtener más información, consulte Ejecutar la aplicación iOS en la nube.

Nota:

Se requiere Xcode 7 o superior para usar el complemento push en iOS.

Buscar el ID para usar como tu App ID.

Antes de registrar la aplicación para notificaciones push, abra config.xml en la aplicación cordova, busque el valor de atributo id en el elemento widget y cópielo para usarlo más adelante. En el siguiente XML, el identificador es io.cordova.myapp7777777.

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="https://schemas.microsoft.com/appx/2014/htmlapps">

Más adelante, use este identificador al crear un identificador de aplicación en el portal para desarrolladores de Apple. Si crea un identificador de aplicación diferente en el portal para desarrolladores, debe seguir algunos pasos adicionales más adelante en este tutorial. El identificador del elemento widget debe coincidir con el identificador de aplicación en el portal para desarrolladores.

Registro de la aplicación para notificaciones push en el portal para desarrolladores de Apple

Registrar un identificador de aplicación para tu app. Cree un identificador de aplicación explícito (no un identificador de aplicación comodín) y, para id. de lote, use el identificador de lote exacto que se encuentra en el proyecto de inicio rápido de Xcode. También es fundamental seleccionar la opción Notificaciones Push.
A continuación, para preparar la configuración de notificaciones push, cree un certificado SSL de "desarrollo" o "distribución".

Ver un vídeo en el que se muestran pasos similares

Configuración de Azure para enviar notificaciones push

En el equipo Mac, inicie acceso a llaveros. 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, a continuación, divulga su contenido. Seleccione solo el certificado (no seleccione la clave privada). A continuación, exporta .
En el de Azure Portal de, seleccione Examinar todo>App Services. A continuación, seleccione el back-end de Mobile Apps.
En Configuración, seleccione Notificaciones Push de App Service. A continuación, seleccione el nombre del centro de notificaciones.
Vaya a Apple Push Notification Services>Cargar Certificado. Cargue el archivo .p12, seleccionando el modo correcto (en función de si el certificado SSL de cliente anterior es de producción o entorno de pruebas). Guarde los cambios.

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

Compruebe que el identificador de la aplicación coincide con la aplicación cordova

Si el identificador de aplicación que creó en la cuenta de desarrollador de Apple ya coincide con el identificador del elemento widget en el archivo config.xml, puede omitir este paso. Sin embargo, si los identificadores no coinciden, siga estos pasos:

Elimine la carpeta de plataformas del proyecto.
Elimine la carpeta plugins del proyecto.
Elimine la carpeta node_modules del proyecto.
Actualice el atributo id del elemento widget en el archivo config.xml para usar el identificador de aplicación que creó en la cuenta de desarrollador de Apple.
Reconstruya su proyecto.

Prueba de notificaciones push en la aplicación iOS

En Visual Studio, asegúrese de que de iOS esté seleccionado como destino de implementación. A continuación, seleccione Dispositivo para ejecutar las notificaciones push en el dispositivo iOS conectado.

Puedes ejecutar las notificaciones push en un dispositivo iOS que esté conectado a tu PC con iTunes. El simulador de iOS no admite notificaciones push.
Seleccione el botón Run o F5 en Visual Studio para compilar el proyecto e iniciar la aplicación en un dispositivo iOS. A continuación, seleccione Aceptar para aceptar notificaciones push.

Nota:

La aplicación solicita confirmación de notificaciones push durante la primera ejecución.
En la aplicación, escriba una tarea y, a continuación, seleccione el icono de más (+).
Compruebe que se recibió una notificación. A continuación, seleccione Aceptar para descartar la notificación.

(Opcional) Configuración y ejecución en Windows

En esta sección se describe cómo ejecutar el proyecto de aplicación apache Cordova en dispositivos Windows 10 (el complemento de inserción PhoneGap es compatible con Windows 10). Si no está trabajando con dispositivos Windows, puede omitir esta sección.

Registro de la aplicación de Windows para notificaciones push con WNS

Para usar las opciones de Tienda en Visual Studio, seleccione un destino de Windows en la lista plataformas de solución, como Windows-x64 o Windows-x86. (Evite de Windows-AnyCPU para las notificaciones push).

En el Explorador de soluciones de Visual Studio, haga clic con el botón derecho en el proyecto de aplicación de la Tienda Windows. A continuación, seleccione la Store para asociar la>aplicación de la tienda con el.

Microsoft Store
En el asistente, seleccione Siguiente. A continuación, inicie sesión con su cuenta Microsoft. En Reservar un nuevo nombre para tu aplicación, escribe un nombre para tu aplicación y luego selecciona Reservar.
Una vez creado correctamente el registro de la aplicación, seleccione el nuevo nombre de la aplicación. Seleccione Siguientey, a continuación, seleccione Asociar. Este proceso agrega la información de registro necesaria de la Tienda Windows al manifiesto de aplicación.
Repita los pasos 1 y 3 para el proyecto de aplicación de la Tienda Windows Phone utilizando el mismo registro que creó anteriormente para la aplicación de la Tienda Windows.
Vaya al centro de desarrollo de Windows e inicie sesión con su cuenta Microsoft. En Mis aplicaciones, seleccione el nuevo registro de aplicaciones. A continuación, expanda Services>notificaciones push.
En la página de notificaciones push , en Servicios de notificaciones push de Windows (WNS) y Microsoft Azure Mobile Apps, seleccione el sitio de servicios en vivo . Anote los valores del SID del paquete y el valor actual en Secreto de la Aplicación.

Importante

El secreto de aplicación y el SID del paquete son credenciales de seguridad importantes. No comparta estos valores con nadie ni distribúyalos con la aplicación.

Ver un vídeo en el que se muestran pasos similares

Configuración del centro de notificaciones para WNS

En el Portal de Azure, seleccione Examinar todo>Servicios de Aplicaciones. A continuación, seleccione el back-end de Mobile Apps. En Configuración, seleccione Notificaciones Push de App Service. A continuación, seleccione el nombre del centro de notificaciones.
Vaya a Windows (WNS). A continuación, escriba la clave de seguridad (secreto de cliente) y siD del paquete que obtuvo del sitio de Live Services. A continuación, seleccione Guardar.

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

Configuración de la aplicación Cordova para admitir notificaciones push de Windows

Para abrir el diseñador de configuración, haga clic con el botón derecho en config.xml. A continuación, seleccione Diseñador de vistas. A continuación, seleccione la pestaña Windows y luego seleccione Windows 10 en Versión de destino de Windows.

Para admitir notificaciones push en las compilaciones de depuración predeterminadas, abra el archivo build.json. A continuación, copie la configuración "release" en la configuración de depuración.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

Después de la actualización, el archivo build.json debe contener el código siguiente:

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

Compile la aplicación y compruebe que no tiene errores. La aplicación cliente ahora debe registrarse para las notificaciones 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 la aplicación de Windows

En Visual Studio, asegúrese de que una plataforma Windows esté seleccionada como destino de implementación, como windows-x64 o Windows-x86. Para ejecutar la aplicación en un equipo windows 10 que hospeda Visual Studio, elija máquina local.

Seleccione el botón Ejecutar para compilar el proyecto e iniciar la aplicación.
En la aplicación, escriba un nombre para un nuevo todoitem y, a continuación, seleccione el icono más (+) para agregarlo.

Compruebe que se recibe una notificación cuando se agrega el elemento.

Pasos siguientes

Obtenga información sobre notification Hubs para obtener información sobre las notificaciones push.
Si aún no lo ha hecho, continúe con el tutorial añadiendo autenticación a su aplicación Apache Cordova.

Aprenda a usar los siguientes SDK:

Compartir a través de

Incorporación de notificaciones push a la aplicación apache Cordova

Información general

Prerrequisitos

Configuración de un centro de notificaciones

Actualización del proyecto de servidor

Proyecto back-end de .NET

Proyecto de back-end con Node.js

Modificación de la aplicación Cordova

Actualice la versión de Cordova en el proyecto.

Instala el complemento push

Instalación del complemento de dispositivo

Registrar el dispositivo cuando se inicia la aplicación

(Opcional) Configuración y ejecución de la aplicación en Android

Habilitación de Firebase Cloud Messaging

Configura el back-end de la aplicación móvil para enviar notificaciones push mediante FCM

Configuración de la aplicación Cordova para Android

Configura tu dispositivo Android para la depuración USB

Instalación de Google Play Services

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

(Opcional) Configuración y ejecución en iOS

Instalación y ejecución del agente de compilación remoto de iOS en un servicio mac o en la nube

Buscar el ID para usar como tu App ID.

Registro de la aplicación para notificaciones push en el portal para desarrolladores de Apple

Configuración de Azure para enviar notificaciones push

Compruebe que el identificador de la aplicación coincide con la aplicación cordova

Prueba de notificaciones push en la aplicación iOS

(Opcional) Configuración y ejecución en Windows

Registro de la aplicación de Windows para notificaciones push con WNS

Configuración del centro de notificaciones para WNS

Configuración de la aplicación Cordova para admitir notificaciones push de Windows

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

Pasos siguientes

Recursos adicionales