Agregar notificaciones push a su aplicación de Apache CordovaAdd push notifications to your Apache Cordova app

Información generalOverview

En este tutorial, añadirá notificaciones push al proyecto de inicio rápido de Apache Cordova para que cada vez que se envíe una notificación push al dispositivo, se inserte un registro.In this tutorial, you add push notifications to the Apache Cordova quickstart project so that a push notification is sent to the device every time a record is inserted.

Si no usa el proyecto de servidor de inicio rápido descargado, necesita el paquete de extensión de notificaciones push.If you do not use the downloaded quickstart server project, you need the push notification extension package. Para más información, consulte Trabajar con el SDK del servidor back-end de .NET para Mobile Apps.For more information, see Work with the .NET back-end server SDK for Mobile Apps.

Requisitos previosPrerequisites

En este tutorial se da por hecho que tiene una aplicación de Apache Cordova que se desarrolló con Visual Studio 2015.This tutorial assumes that you have an Apache Cordova application that was developed with Visual Studio 2015. Debe usarse un dispositivo Android, Windows o iOS, o bien Google Android Emulator.This device should run on Google Android Emulator, an Android device, a Windows device, or an iOS device.

Para completar este tutorial, necesita:To complete this tutorial, you need:

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.

Vea un vídeo que muestra los pasos de esta sección.Watch a video showing steps in this section.

Actualización del proyecto de servidorUpdate the server project

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.

Modificación de la aplicación de CordovaModify your Cordova app

Para asegurarse de que el proyecto de aplicación de Apache Cordova está listo para controlar las notificaciones push, instale el complemento de notificaciones push de Cordova además de cualquier servicio de inserción push específico de la plataforma.To ensure that your Apache Cordova app project is ready to handle push notifications, install the Cordova push plugin plus any platform-specific push services.

Actualización de la versión de Cordova en el proyecto.Update the Cordova version in your project.

Si el proyecto usa una versión anterior a Apache Cordova 6.1.1, actualice el proyecto de cliente.If your project uses a version of Apache Cordova that's earlier than version 6.1.1, update the client project. Para actualizar el proyecto, siga estos pasos:To update the project, take the following steps:

  • Haga clic con el botón derecho en config.xml para abrir el diseñador de configuración.To open the configuration designer, right-click config.xml.
  • Seleccione la pestaña Plataformas.Select the Platforms tab.
  • Elija 6.1.1 en el cuadro de texto Cordova CLI.In the Cordova CLI text box, select 6.1.1.
  • Para actualizar el proyecto, seleccione Compilary, a continuación, Compilar solución.To update the project, select Build, and then select Build Solution.

Instalación del complemento de inserciónInstall the push plugin

Las aplicaciones de Apache Cordova no controlan el dispositivo ni las funcionalidades de red de forma nativa.Apache Cordova applications do not natively handle device or network capabilities. Estas funcionalidades las proporcionan los complementos que se publican en npm o en GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. El complemento phonegap-plugin-push controla las notificaciones push de la red.The phonegap-plugin-push plugin handles network push notifications.

Puede instalar el complemento de notificaciones push de una de estas formas:You can install the push plugin in one of the following ways:

Desde el símbolo del sistema:From the command-prompt:

Ejecute el siguiente comando:Run the following command:

cordova plugin add phonegap-plugin-push

Desde Visual Studio:From within Visual Studio:

  1. En el Explorador de soluciones, abra el archivo config.xml.In Solution Explorer, open the config.xml file. A continuación, seleccione Complementos > Personalizado.Next, select Plugins > Custom. A continuación, seleccione Git como origen de instalación.Then select Git as the installation source.

  2. Escriba https://github.com/phonegap/phonegap-plugin-push como origen.Enter https://github.com/phonegap/phonegap-plugin-push as the source.

    Abra el archivo config.xml en el Explorador de soluciones.

  3. Seleccione la flecha que hay junto al origen de la instalación.Select the arrow next to the installation source.

  4. En SENDER_ID, si ya tiene un identificador numérico del proyecto para el proyecto de la consola para desarrolladores de Google, puede agregarlo aquí.In SENDER_ID, if you already have a numeric project ID for the Google Developer Console project, you can add it here. En caso contrario, escriba un valor de marcador de posición, como 777777.Otherwise, enter a placeholder value, such as 777777. Si su objetivo es Android, puede actualizar este valor en el archivo config.xml más adelante.If you are targeting Android, you can update this value in the config.xml file later.

    Nota

    A partir de la versión 2.0.0, google-services.json debe instalarse en el directorio raíz del proyecto para configurar el identificador del remitente.As of version 2.0.0, google-services.json needs to be installed in the root folder of your project to configure the sender ID. Para más información, consulte la documentación de instalación.For more information, see the installation documentation.

  5. Seleccione Agregar.Select Add.

Ahora ya está instalado el complemento de inserción.The push plugin is now installed.

Instalación del complemento del dispositivoInstall the device plugin

Siga el mismo procedimiento que usó para instalar el complemento de inserción.Follow the same procedure you used to install the push plugin. Añada el complemento de dispositivo de la lista de complementos principalesAdd the Device plugin from the Core plugins list. (haga clic en Complementos > Principales para encontrarlo). Este complemento es necesario para obtener el nombre de la plataforma.(To find it, select Plugins > Core.) You need this plugin to obtain the platform name.

Registro del dispositivo al inicio de la aplicaciónRegister your device when the application starts

Inicialmente, se incluirá el código mínimo para Android.Initially, we include some minimal code for Android. Más tarde, puede modificar la aplicación para que se ejecute en iOS o en Windows 10.Later you can modify the app to run on iOS or Windows 10.

  1. Añada una llamada a registerForPushNotifications durante la devolución de llamada para el proceso de inicio de sesión.Add a call to registerForPushNotifications during the callback for the sign-in process. Como alternativa, puede añadirla en la parte inferior del método onDeviceReady:Alternatively, you can add it at the bottom of the onDeviceReady method:

    // 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);
    

    Este ejemplo muestra la llamada a registerForPushNotifications después de que la autenticación se realiza correctamente.This example shows calling registerForPushNotifications after authentication succeeds. Puede llamar a registerForPushNotifications() tantas veces como sea necesario.You can call registerForPushNotifications() as often as is required.

  2. Agregue el nuevo método registerForPushNotifications como se indica a continuación:Add the new registerForPushNotifications method as follows:

    // 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);
    }
    
  3. (Android) En el código anterior, reemplace Your_Project_ID por el identificador numérico del proyecto de la aplicación en la consola para desarrolladores de Google.(Android) In the preceding code, replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

(Opcional) Configuración y ejecución de la aplicación en Android(Optional) Configure and run the app on Android

Complete esta sección para habilitar las notificaciones push en Android.Complete this section to enable push notifications for Android.

Habilitar la mensajería en la nube FirebaseEnable Firebase Cloud Messaging

Dado que, en principio, el objetivo es la plataforma Android de Google, es preciso habilitar el Servicio de mensajería en la nube de Firebase.Since you are targeting the Google Android platform initially, you must enable Firebase Cloud Messaging.

  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 Agregar Firebase a una aplicación de Android, realice los pasos siguientes:On the Add Firebase to your Android app page, do the following steps:

    1. En Nombre del paquete de Android, copie el valor de su 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 de dependencias.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 de dependencias.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 Siguiente en la página.Select Next on the page.

  7. Seleccione Omitir este paso en la página.Select Skip this step on the page.

    Omita el último paso.1.1.

  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. Este valor se utilizará para configurar el centro de notificaciones.You use this value to configure your notification hub.

Configuración del back-end de aplicación móvil para enviar solicitudes de notificaciones push mediante FCMConfigure the Mobile App back end to send push requests 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.

Configuración de una aplicación Cordova para AndroidConfigure your Cordova app for Android

En la aplicación de Cordova, abra el archivo config.xml.In your Cordova app, open config.xml. A continuación, reemplace Your_Project_ID por el identificador numérico del proyecto de la aplicación en la consola para desarrolladores de Google.Then replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

<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.Open index.js. A continuación, actualice el código para usar el identificador numérico del proyecto.Then update the code to use your numeric project ID.

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

Configuración de un dispositivo Android para la depuración USBConfigure your Android device for USB debugging

Antes de implementar su aplicación en su dispositivo Android, debe habilitar la depuración USB.Before you can deploy your application to your Android Device, you need to enable USB debugging. Realice los pasos siguientes en su teléfono Android:Take the following steps on your Android phone:

  1. Vaya a Ajustes > Acerca del teléfono.Go to Settings > About phone. A continuación, pulse Número de compilación hasta que se habilite el modo de programador (unas siete veces).Then tap the Build number until developer mode is enabled (about seven times).
  2. En Ajustes > Opciones de desarrollo, habilite Depuración USB.Back in Settings > Developer Options, enable USB debugging. A continuación, conecte su teléfono Android al equipo de desarrollo mediante un cable USB.Then connect your Android phone to your development PC with a USB cable.

Cuando lo probamos, usamos un dispositivo Google Nexus 5X con Android 6.0 (Marshmallow).We tested this using a Google Nexus 5X device running Android 6.0 (Marshmallow). Sin embargo, las técnicas son comunes a cualquier versión moderna de Android.However, the techniques are common across any modern Android release.

Instalación de Google Play ServicesInstall Google Play Services

El complemento de inserción se basa en Google Play Services de Android para las notificaciones push.The push plugin relies on Android Google Play Services for push notifications.

  1. En Visual Studio, seleccione Herramientas > Android > Android SDK Manager.In Visual Studio, select Tools > Android > Android SDK Manager. A continuación, expanda la carpeta Extras.Then expand the Extras folder. Active las casillas apropiadas para asegurarse de que se instala cada uno de los siguientes SDK:Check the appropriate boxes to ensure that each of the following SDKs is installed:

    • Android 2.3 o superiorAndroid 2.3 or higher
    • Revisión de Google Repository 27 o superiorGoogle Repository revision 27 or higher
    • Google Play Services 9.0.2 o superiorGoogle Play Services 9.0.2 or higher
  2. Seleccione Instalar paquetes.Select Install Packages. A continuación, espere hasta que la instalación se complete.Then wait for the installation to finish.

Las bibliotecas requeridas actuales se enumeran en la documentación de instalación de phonegap-plugin-push.The current required libraries are listed in the phonegap-plugin-push installation documentation.

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

Ahora puede probar las notificaciones push mediante la ejecución de la aplicación y la inserción de elementos en la tabla TodoItem.You can now test push notifications by running the app and inserting items in the TodoItem table. Puede hacerlo desde el mismo dispositivo o desde otro dispositivo, siempre que use el mismo back-end.You can test from the same device or from a second device, as long as you are using the same back end. Pruebe la aplicación Cordova en la plataforma Android de una de las siguientes maneras:Test your Cordova app on the Android platform in one of the following ways:

  • En un dispositivo físico: conecte el dispositivo Android al equipo de desarrollo con un cable USB.On a physical device: Attach your Android device to your development computer with a USB cable. En lugar de Emulador de Android de Google, seleccione Dispositivo.Instead of Google Android Emulator, select Device. Visual Studio implementa la aplicación en el dispositivo y luego la ejecuta.Visual Studio deploys the application to the device and runs the application. Luego podrá interactuar con la aplicación en el dispositivo.You can then interact with the application on the device.

    Las aplicaciones de pantalla compartida, como Mobizen pueden ayudarle a desarrollar una aplicación Android.Screen-sharing applications such as Mobizen can assist you in developing Android applications. Mobizen proyecta la pantalla de Android en un explorador web de su equipo.Mobizen projects your Android screen to a web browser on your PC.

  • En un emulador de Android: se requieren pasos de configuración adicionales cuando se utiliza un emulador.On an Android emulator: There are additional configuration steps that are required when you're using an emulator.

    Asegúrese de que va a realizar la implementación en un dispositivo virtual que tenga las API de Google establecidas como destino, como se muestra en el administrador de dispositivo virtual Android (AVD).Make sure you are deploying to a virtual device that has Google APIs set as the target, as shown in the Android Virtual Device (AVD) manager.

    Administrador de dispositivos virtuales de Android

    Si desea usar un emulador de x86 más rápido, instale el controlador de HAXM y, a continuación, configure el emulador para usarlo.If you want to use a faster x86 emulator, install the HAXM driver, and then configure the emulator to use it.

    Agregue una cuenta de Google al dispositivo Android seleccionando Aplicaciones > Configuración > Agregar cuenta.Add a Google account to the Android device by selecting Apps > Settings > Add account. A continuación, siga las indicaciones.Then follow the prompts.

    Adición de una cuenta de Google en el dispositivo Android

    Ejecute la aplicación todolist como antes e inserte un nuevo elemento todo.Run the todolist app as before and insert a new todo item. Esta vez, se muestra un icono de notificación en el área de notificación.This time, a notification icon is displayed in the notification area. Puede abrir el cajón de notificaciones para ver el texto completo de la notificación.You can open the notification drawer to view the full text of the notification.

    Ver la notificación

(Optional) Configuración y ejecución en iOS(Optional) Configure and run on iOS

En esta sección se explica cómo ejecutar el proyecto Cordova en dispositivos de iOS.This section is for running the Cordova project on iOS devices. Puede omitir esta sección si no está trabajando con dispositivos iOS.If you aren't working with iOS devices, you can skip this section.

Instalación y ejecución del agente de compilación remoto de iOS en un servicio Mac o en la nubeInstall and run the iOS remote build agent on a Mac or cloud service

Para poder ejecutar una aplicación de Cordova en iOS mediante Visual Studio, siga los pasos de la guía de instalación de iOS para instalar y ejecutar el agente de compilación remoto.Before you can run a Cordova app on iOS using Visual Studio, go through the steps in the iOS setup guide to install and run the remote build agent.

Asegúrese de que puede compilar la aplicación para iOS.Make sure you can build the app for iOS. Los pasos de la guía de instalación son necesarios para compilar para iOS desde Visual Studio.The steps in the setup guide are required for building the app for iOS from Visual Studio. Si no tiene un equipo Mac, puede compilar para iOS mediante el agente de compilación remoto en un servicio como MacInCloud.If you do not have a Mac, you can build for iOS by using the remote build agent on a service like MacInCloud. Para más información, consulte el artículo sobre la ejecución de una aplicación iOS en la nube.For more information, see Run your iOS app in the cloud.

Nota

Se requiere Xcode 7 o posterior para usar el complemento de inserción de iOS.Xcode 7 or greater is required to use the push plugin on iOS.

Búsqueda del identificador que se va a usar como id. de la aplicaciónFind the ID to use as your App ID

Antes de registrar la aplicación para las notificaciones push, abra config.xml en su aplicación de Cordova, busque el valor del atributo id en el elemento de widget y cópielo para su uso posterior.Before you register your app for push notifications, open config.xml in your Cordova app, find the id attribute value in the widget element, and then copy it for later use. En el siguiente XML, el identificador es io.cordova.myapp7777777.In the following XML, the ID is 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="http://schemas.microsoft.com/appx/2014/htmlapps">

Posteriormente, utilice este identificador al crear un id. de aplicación en el portal para desarrolladores de Apple.Later, use this identifier when you create an App ID on Apple's developer portal. Si crea un identificador de aplicación diferente en el portal para desarrolladores, debe realizar algunos pasos adicionales más adelante en este tutorial.If you create a different App ID on the developer portal, you must take a few extra steps later in this tutorial. El identificador del elemento widget debe coincidir con el identificador de aplicación del portal para desarrolladores.The ID in the widget element must match the App ID on the developer portal.

Registro de la aplicación para notificaciones de inserción en el portal para desarrolladores de AppleRegister the app for push notifications on Apple's developer portal

Ver un vídeo donde se muestren pasos similaresWatch a video showing similar steps

Configuración de Azure para enviar notificaciones pushConfigure Azure to send push notifications

  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.

Comprobación de que el id. de aplicación coincide con la aplicación de CordovaVerify that your App ID matches your Cordova app

Si el identificador de la aplicación que creó en la cuenta para desarrolladores de Apple ya coincide con el identificador del elemento widget del archivo config.xml, puede omitir este paso.If the App ID that you created in your Apple Developer Account already matches the ID of the widget element in the config.xml file, you can skip this step. Sin embargo, si los identificadores no coinciden, siga estos pasos:However, if the IDs don't match, take the following steps:

  1. Elimine la carpeta platforms del proyecto.Delete the platforms folder from your project.
  2. Elimine la carpeta plugins del proyecto.Delete the plugins folder from your project.
  3. Elimine la carpeta node_modules del proyecto.Delete the node_modules folder from your project.
  4. Actualice el atributo id del elemento widget en el archivo config.xml para que use el identificador de la aplicación que creó en la cuenta para desarrolladores de Apple.Update the id attribute of the widget element in the config.xml file to use the app ID that you created in your Apple developer account.
  5. Vuelva a compilar el proyecto.Rebuild your project.
Prueba de las notificaciones push en su aplicación de iOSTest push notifications in your iOS app
  1. En Visual Studio, asegúrese de que iOS está seleccionado como destino de implementación.In Visual Studio, make sure that iOS is selected as the deployment target. A continuación, seleccione Dispositivo para ejecutar las notificaciones push en el dispositivo iOS conectado.Then select Device to run the push notifications on your connected iOS device.

    Puede ejecutar las notificaciones push en un dispositivo iOS conectado a su equipo con iTunes.You can run the push notifications on an iOS device that's connected to your PC with iTunes. El simulador de iOS no admite notificaciones push.The iOS Simulator does not support push notifications.

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

    Nota

    La aplicación solicita confirmación para las notificaciones push durante la primera ejecución.The app requests confirmation for push notifications during the first run.

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

  4. Compruebe que se recibe una notificación.Verify that a notification was received. A continuación, seleccione Aceptar para descartar la notificación.Then select OK to dismiss the notification.

(Optional) Configuración y ejecución en Windows(Optional) Configure and run on Windows

En esta sección se explica cómo ejecutar el proyecto de la aplicación de Apache Cordova en dispositivos con Windows 10 (el complemento de notificaciones push de PhoneGap es compatible con Windows 10).This section describes how to run the Apache Cordova app project on Windows 10 devices (the PhoneGap push plugin is supported on Windows 10). Puede omitir esta sección si no está trabajando con dispositivos Windows.If you are not working with Windows devices, you can skip this section.

Registro de la aplicación de Windows para notificaciones push con WNSRegister your Windows app for push notifications with WNS

Para utilizar las opciones de Tienda en Visual Studio, seleccione un destino de Windows en la lista Plataformas de solución, como Windows-x64 o Windows-x86To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, such as Windows-x64 or Windows-x86. (evite Windows-AnyCPU para las notificaciones push).(Avoid Windows-AnyCPU for push notifications.)

  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.

Visualización de un vídeo donde se muestren pasos similaresWatch a video showing similar steps

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.

Configuración de una aplicación de Cordova para que admita notificaciones push de WindowsConfigure your Cordova app to support Windows push notifications

Haga clic con el botón derecho en config.xml para abrir el diseñador de configuración.Open the configuration designer by right-clicking config.xml. A continuación, seleccione Diseñador de vistas.Then select View Designer. Luego, seleccione la pestaña Windows y, a continuación, seleccione Windows 10 en Versión de Windows de destino.Next, select the Windows tab, and then select Windows 10 under Windows Target Version.

Para admitir las notificaciones push en sus compilaciones (depuración) predeterminadas, abra el archivo build.json.To support push notifications in your default (debug) builds, open the build.json file. Copie la configuración de la "versión" en la configuración de depuración.Then copy the "release" configuration to your debug configuration.

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

Tras la actualización, el archivo build.json debe contener el código siguiente:After the update, the build.json file should contain the following code:

"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 hay errores.Build the app and verify that you have no errors. Ahora debe registrar la aplicación cliente para las notificaciones desde el back-end de Mobile Apps.Your client app should now register for the 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

En Visual Studio, asegúrese de que hay una plataforma de Windows seleccionada como destino de implementación, como Windows-x64 o Windows-x86.In Visual Studio, make sure that a Windows platform is selected as the deployment target, such as Windows-x64 or Windows-x86. Para ejecutar la aplicación en un equipo con Windows 10 que hospede Visual Studio, elija Equipo local.To run the app on a Windows 10 PC that's hosting Visual Studio, choose Local Machine.

  1. Presione el botón Ejecutar para compilar el proyecto e iniciar la aplicación.Select the Run button to build the project and start the app.

  2. En la aplicación, escriba un nombre para un nuevo todoitem y haga clic en el icono del signo más (+) para añadirlo.In the app, type a name for a new todoitem, and then select the plus (+) icon to add it.

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

Aprenda a usar los siguientes SDK:Learn how to use the following SDKs: