Aggiungere notifiche push all'app Apache CordovaAdd push notifications to your Apache Cordova app

PanoramicaOverview

In questa esercitazione vengono aggiunte notifiche push al progetto di [avvio rapido di Apache Cordova], in modo che una notifica push venga inviata al dispositivo a ogni inserimento di record.In this tutorial, you add push notifications to the [Apache Cordova quick start] project so that a push notification is sent to the device every time a record is inserted.

Se non si usa il progetto server di avvio rapido scaricato, è necessario aggiungere il pacchetto di estensione di notifica push.If you do not use the downloaded quick start server project, you need the push notification extension package. Per altre informazioni, vedere Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.For more information, see Work with the .NET backend server SDK for Azure Mobile Apps.

PrerequisitiPrerequisites

Questa esercitazione illustra un'applicazione Apache Cordova sviluppata in Visual Studio 2015 e in esecuzione nell'emulatore Android di Google, in un dispositivo Android, un dispositivo Windows e un dispositivo iOS.This tutorial covers an Apache Cordova application developed with Visual Studio 2015 that runs on the Google Android Emulator, an Android device, a Windows device, and an iOS device.

Per completare questa esercitazione, sono necessari:To complete this tutorial, you need:

Configurare un hub di notificaConfigure a notification hub

Poiché le funzioni delle app per dispositivi mobili del Servizio app di Azure usano Hub di notifica di Azure per inviare push, si dovrà configurare un hub di notifica per l'app per dispositivi mobili.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. Nel Portale di Azure andare in Servizi app, quindi fare clic sul back-end dell'app.In the [Azure portal], go to App Services, and then click your app back end. In Impostazioni fare clic su Push.Under Settings, click Push.
  2. Fare clic su Connetti per aggiungere una risorsa dell'hub di notifica all'app.Click Connect to add a notification hub resource to the app. È possibile creare un hub o connettersi a uno esistente.You can either create a hub or connect to an existing one.

A questo punto un hub di notifica è stato connesso al progetto di back-end dell'app per dispositivi mobili.Now you have connected a notification hub to your Mobile Apps back-end project. In seguito si configurerà l'hub di notifica per la connessione a un Platform Notification System (PNS) per effettuare il push ai dispositivi.Later you will configure this notification hub to connect to a platform notification system (PNS) to push to devices.

Guardare un video che illustra la procedura disponibile in questa sezioneWatch a video showing steps in this section

Aggiornare il progetto serverUpdate the server project

In questa sezione viene aggiornato il codice nel progetto di back-end dell'app per dispositivi mobili esistente per inviare una notifica push ogni volta che viene aggiunto un nuovo 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. Questa operazione si basa sulla funzionalità dei modelli di Hub di notifica di Azure, che abilita i push multipiattaforma.This is powered by the template feature of Azure Notification Hubs, enabling cross-platform pushes. I diversi client vengono registrati per le notifiche push usando i modelli e un unico push universale può raggiungere tutte le piattaforme client.The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

Scegliere una delle seguenti procedure che corrisponde al tipo di progetto di back-end—, che sia back-end .NET o back-end Node.js.Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

Progetto di back-end .NET.NET back-end project

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto server, quindi scegliere Gestisci pacchetti NuGet.In Visual Studio, right-click the server project and click Manage NuGet Packages. Cercare Microsoft.Azure.NotificationHubs, quindi fare clic su Installa.Search for Microsoft.Azure.NotificationHubs, and then click Install. Consente di installare la libreria di Hub di notifica per l'invio di notifiche dal back-end.This installs the Notification Hubs library for sending notifications from your back end.
  2. Nel progetto server aprire Controller > TodoItemController.cs e quindi aggiungere le istruzioni using seguenti:In the server project, open Controllers > TodoItemController.cs, and add the following using statements:

     using System.Collections.Generic;
     using Microsoft.Azure.NotificationHubs;
     using Microsoft.Azure.Mobile.Server.Config;
    
  3. Nel metodo PostTodoItem aggiungere il codice seguente dopo la chiamata 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);
    
     // Sending the message so that all template registrations that contain "messageParam"
     // will 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");
     }
    

    Ogni volta che viene inserito un nuovo elemento, viene inviata una notifica modello contenente l'elemento item.text.This sends a template notification that contains the item.Text when a new item is inserted.

  4. Pubblicare di nuovo il progetto server.Republish the server project.

Progetto di back-end Node.jsNode.js back-end project

  1. Se ancora non è stato fatto, scaricare il progetto di back-end di avvio rapido oppure usare l'editor online del Portale di Azure.If you haven't already done so, download the quickstart back-end project, or else use the online editor in the Azure portal.
  2. Sostituire il codice esistente nel file todoitem.js con il codice seguente:Replace the existing code in todoitem.js with the following:

     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 http://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;  
    

    Ogni volta che viene inserito un nuovo elemento, viene inviata una notifica modello contenente l'elemento item.text.This sends a template notification that contains the item.text when a new item is inserted.

  3. Quando si modifica il file nel computer locale, ripubblicare il progetto server.When editing the file on your local computer, republish the server project.

Modificare l'app CordovaModify your Cordova app

Assicurarsi che il progetto app Apache Cordova sia pronto per la gestione delle notifiche push installando il plug-in di push di Cordova ed eventuali servizi push specifici della piattaforma.Ensure your Apache Cordova app project is ready to handle push notifications by installing the Cordova push plugin plus any platform-specific push services.

Aggiornare la versione di Cordova nel progetto.Update the Cordova version in your project.

Se il progetto utilizza una versione di Apache Cordova precedente alla v6.1.1, aggiornare il progetto client.If your project uses a version of Apache Cordova earlier than v6.1.1, update the client project. Per aggiornare il progetto:To update the project:

  • Fare clic con il pulsante destro su config.xml per aprire la finestra di progettazione configurazione.Right-click config.xml to open the configuration designer.
  • Selezionare la scheda Piattaforme.Select the Platforms tab.
  • Scegliere 6.1.1 nella casella di testo Cordova CLI.Choose 6.1.1 in the Cordova CLI text box.
  • Scegliere Compila, quindi Compila soluzione per aggiornare il progetto.Choose Build, then Build Solution to update the project.

Installare il plug-in di pushInstall the push plugin

Le applicazioni Apache Cordova non gestiscono in modo nativo le funzionalità del dispositivo o della rete.Apache Cordova applications do not natively handle device or network capabilities. Queste funzionalità sono incluse nei plug-in che vengono pubblicati in npm o GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. Il plug-in phonegap-plugin-push viene usato per gestire le notifiche push di rete.The phonegap-plugin-push plugin is used to handle network push notifications.

È possibile installare il plug-in di push in uno dei modi seguenti:You can install the push plugin in one of these ways:

Dal prompt dei comandi:From the command-prompt:

Eseguire il comando seguente:Execute the following command:

cordova plugin add phonegap-plugin-push

Da Visual Studio:From within Visual Studio:

  1. In Esplora soluzioni aprire il file config.xml, fare clic su Plug-in>Personalizza, selezionare Git come origine dell'installazione e quindi immettere https://github.com/phonegap/phonegap-plugin-push come origine.In Solution Explorer, open the config.xml file click Plugins > Custom, select Git as the installation source, then enter https://github.com/phonegap/phonegap-plugin-push as the source.

  2. Fare clic sulla freccia accanto all'origine dell'installazione.Click the arrow next to the installation source.

  3. In SENDER_ID è possibile aggiungere l'ID numerico del progetto della Console per gli sviluppatori di Google, se l'ID è già disponibile.In SENDER_ID, if you already have a numeric project ID for the Google Developer Console project, you can add it here. In caso contrario, immettere un valore segnaposto, ad esempio 777777.Otherwise, enter a placeholder value, like 777777. Se la destinazione è Android, sarà possibile aggiornare questo valore nel file config.xml in un secondo momento.If you are targeting Android, you can update this value in config.xml later.
  4. Fare clic su Aggiungi.Click Add.

Il plug-in di push è stato installato.The push plugin is now installed.

Installare il plug-in del dispositivoInstall the device plugin

Seguire la stessa procedura utilizzata per installare il plug-in di push.Follow the same procedure you used to install the push plugin. Aggiungere il plug-in del dispositivo dall'elenco di plug-in di base (fare clic su Plug-in > Base per trovarlo).Add the Device plugin from the Core plugins list (click Plugins > Core to find it). Questo plug-in è necessario per ottenere il nome della piattaforma.You need this plugin to obtain the platform name.

Registrare il dispositivo all'avvio dell'applicazioneRegister your device on application start-up

Viene inizialmente incluso un codice minimo per Android.Initially, we include some minimal code for Android. Modificare quindi l'applicazione per eseguirla su iOS o Windows 10.Later, modify the app to run on iOS or Windows 10.

  1. Aggiungere una chiamata a registerForPushNotifications durante il callback per il processo di accesso o nella parte inferiore del metodo onDeviceReady:Add a call to registerForPushNotifications during the callback for the login process, or at the bottom of the onDeviceReady method:

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

    Questo esempio illustra la chiamata a registerForPushNotifications al termine dell'autenticazione.This example shows calling registerForPushNotifications after authentication succeeds. È possibile chiamare registerForPushNotifications() ogni qualvolta è necessario.You can call registerForPushNotifications() as often as is required.

  2. Aggiungere il nuovo metodo registerForPushNotifications come indicato di seguito: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) Nel codice precedente sostituire Your_Project_ID con l'ID progetto numerico dell'app indicato nella Console per gli sviluppatori di Google.(Android) In the preceding code, replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

(Facoltativo) Configurare ed eseguire l'app in Android(Optional) Configure and run the app on Android

Completare questa sezione per abilitare le notifiche push per Android.Complete this section to enable push notifications for Android.

Abilitare Firebase Cloud MessagingEnable Firebase Cloud Messaging

Poiché la destinazione iniziale è la piattaforma di Google Android, è necessario abilitare Firebase Cloud Messaging.Since we are targeting the Google Android platform initially, you must enable Firebase Cloud Messaging.

  1. Accedere alla console di Firebase.Sign in to the Firebase console. Creare un nuovo progetto Firebase se non è già disponibile.Create a new Firebase project if you don't already have one.
  2. Dopo aver creato il progetto, fare clic su Add Firebase to your Android app (Aggiungi Firebase all'app Android) e seguire le istruzioni fornite.After your project is created, click Add Firebase to your Android app and follow the instructions provided.

  3. Nella console di Firebase fare clic sul file cog per il progetto e quindi fare clic su Impostazioni progetto.In the Firebase console, click the cog for your project and then click Project Settings.

  4. Fare clic sulla scheda Cloud Messaging nelle impostazioni del progetto e copiare il valore di Chiave server e ID mittente.Click the Cloud Messaging tab in your project settings, and copy the value of the Server key and Sender ID. Questi valori verranno usati in un secondo momento per configurare i criteri di accesso dell'hub di notifica de e il gestore delle notifiche nell'app.These values will be used later to configure the notification hub access policy, and your notification handler in the app.

Configurare il back-end dell'app per dispositivi mobili per inviare richieste push usando FCMConfigure the Mobile App backend to send push requests using FCM

  1. Nel Portale di Azure fare clic su Browse All (Esplora tutto) > Servizi app e quindi scegliere il back-end dell'app per dispositivi mobili.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. In Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica.Under Settings, click App Service Push, and then click your notification hub name.
  2. Andare in Google (GCM), immettere la chiave del server FCM ottenuta dalla console Firebase, quindi fare clic su Salva.Go to Google (GCM), enter the FCM server key you obtained from the Firebase console, and then click Save.

Il servizio è ora configurato per l'uso di Firebase Cloud Messaging.Your service is now configured to work with Firebase Cloud Messaging.

Configurare l'app Cordova per AndroidConfigure your Cordova app for Android

Nell'app Cordova aprire il file config.xml e sostituire Your_Project_ID con l'ID progetto numerico dell'app indicato nella Console per gli sviluppatori di Google.In your Cordova app, open config.xml and 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>

Aprire index.js e aggiornare il codice per usare l'ID progetto numerico.Open index.js and 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: {}
    });

Configurare il dispositivo Android per il debug USBConfigure your Android device for USB debugging

Prima di poter distribuire l'applicazione al dispositivo Android, è necessario abilitare il debug USB.Before you can deploy your application to your Android Device, you need to enable USB Debugging. Sul telefono Android seguire questa procedura:Perform the following steps on your Android phone:

  1. Passare a Settings (Impostazioni)>About phone (Info sul dispositivo) e toccare Build number (Numero build) circa sette volte finché non sarà abilitata la modalità sviluppatore.Go to Settings > About phone, then tap the Build number until developer mode is enabled (about seven times).
  2. Tornare in Settings (Impostazioni)>Developer Options (Opzioni per gli sviluppatori), abilitare USB debugging (Debug USB), quindi connettere lo smartphone Android al PC di sviluppo con un cavo USB.Back in Settings > Developer Options enable USB debugging, then connect your Android phone to your development PC with a USB Cable.

Per questo test è stato usato un dispositivo Google Nexus 5X con Android 6.0 (Marshmallow).We tested this using a Google Nexus 5X device running Android 6.0 (Marshmallow). Tuttavia, le tecniche sono comuni a qualsiasi versione moderna di Android.However, the techniques are common across any modern Android release.

Installare servizi Google PlayInstall Google Play Services

Il plug-in di push si basa su servizi Google Play Android per notifiche push.The push plugin relies on Android Google Play Services for push notifications.

  1. In Visual Studio fare clic su Strumenti>Android>Android SDK Manager, espandere la cartella Funzionalità aggiuntive e selezionare la casella per assicurarsi che tutti gli SDK seguenti siano installati.In Visual Studio, click Tools > Android > Android SDK Manager, expand the Extras folder and check the box to make sure that each of the following SDKs is installed.

    • Android 2.3 o versione successivaAndroid 2.3 or higher
    • Google Repository 27 o versione successivaGoogle Repository revision 27 or higher
    • Google Play Services 9.0.2 o versione successivaGoogle Play Services 9.0.2 or higher
  2. Fare clic su Install Packages (Installa pacchetti) e attendere il completamento dell'installazione.Click Install Packages and wait for the installation to complete.

Le librerie attualmente necessarie sono elencate nella documentazione relativa all'installazione di phonegap-plugin-push.The current required libraries are listed in the phonegap-plugin-push installation documentation.

Testare le notifiche push nell'app in AndroidTest push notifications in the app on Android

A questo punto è possibile testare le notifiche push.You can now test push notifications by running the app and inserting items in the TodoItem table. Eseguire l'applicazione e inserire elementi nella tabella TodoItem usando lo stesso dispositivo oppure un altro dispositivo, purché il back-end sia lo stesso.You can test from the same device or from a second device, as long as you are using the same backend. Testare l'app Cordova sulla piattaforma Android in uno dei modi seguenti:Test your Cordova app on the Android platform in one of the following ways:

  • In un dispositivo fisico: collegare il dispositivo Android al computer di sviluppo con un cavo USB.On a physical device: Attach your Android device to your development computer with a USB cable. Invece di selezionare Emulatore Android di Google, selezionare Dispositivo.Instead of Google Android Emulator, select Device. Visual Studio distribuisce l'applicazione nel dispositivo e quindi la esegue.Visual Studio deploys the application to the device and then runs the application. Sarà quindi possibile interagire con l'applicazione dal dispositivo.You can then interact with the application on the device.

    Migliorare l'esperienza di sviluppo.Improve your development experience. Le applicazioni per la condivisione dello schermo come Mobizen possono facilitare lo sviluppo di un'applicazione Android.Screen sharing applications such as Mobizen can assist you in developing an Android application. Mobizen proietta lo schermo Android su un Web browser sul PC.Mobizen projects your Android screen to a web browser on your PC.

  • In un emulatore Android: sono necessari altri passaggi di configurazione per l'esecuzione in un emulatore.On an Android emulator: There are additional configuration steps required when running on an emulator.

    Assicurarsi di distribuire su un dispositivo virtuale che abbia le API Google impostate come destinazione, come illustrato di seguito nel gestore del dispositivo virtuale 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.

    Se si vuole usare un emulatore x86 più veloce, installare il driver HAXM e configurare l'emulatore per usarlo.If you want to use a faster x86 emulator, you install the HAXM driver and configure the emulator to use it.

    Aggiungere un account Google al dispositivo Android facendo clic su Apps (App) > Settings (Impostazioni) > Add account (Aggiungi account), quindi seguire le istruzioni.Add a Google account to the Android device by clicking Apps > Settings > Add account, then follow the prompts.

    Eseguire l'app todolist come fatto in precedenza e inserire un nuovo elemento todo.Run the todolist app as before and insert a new todo item. Questa volta, viene visualizzata un'icona di notifica nell'area di notifica.This time, a notification icon is displayed in the notification area. È possibile aprire la cassetta della notifica per visualizzare il testo completo della notifica.You can open the notification drawer to view the full text of the notification.

(Facoltativo) Configurare ed eseguire l'app in iOS(Optional) Configure and run on iOS

Questa sezione illustra l'esecuzione del progetto Cordova in dispositivi iOS.This section is for running the Cordova project on iOS devices. Se non si usano dispositivi iOS, è possibile ignorare questa sezione.If you are not working with iOS devices, you can skip this section.

Installare ed eseguire l'agente remotebuild per iOS in un computer Mac o un servizio cloudInstall and run the iOS remote build agent on a Mac or cloud service

Prima di eseguire un'app Cordova in iOS usando Visual Studio, seguire i passaggi nella guida alla configurazione per iOS per installare ed eseguire l'agente remotebuild.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.

Verificare che sia possibile compilare l'app per iOS.Make sure you can build the app for iOS. I passaggi indicati nella guida alla configurazione sono necessari per la compilazione per iOS da Visual Studio.The steps in the setup guide are required to build for iOS from Visual Studio. Se non è disponibile un computer Mac, è possibile eseguire la compilazione per iOS usando l'agente remotebuild in un servizio come MacInCloud.If you do not have a Mac, you can build for iOS using the remote build agent on a service like MacInCloud. Per altre informazioni, vedere Eseguire l'app iOS nel cloud.For more info, see Run your iOS app in the cloud.

Nota

XCode 7 o versione successiva è necessario per usare il plug-in di push in iOS.XCode 7 or greater is required to use the push plugin on iOS.

Trovare l'ID da usare come ID appFind the ID to use as your App ID

Prima di registrare l'app per le notifiche push, aprire il file config.xml nell'app Cordova, trovare il valore dell'attributo id nell'elemento widget e copiarlo per usarlo in un secondo momento.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 copy it for later use. Nel codice XML seguente, l'ID è 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="http://www.w3.org/ns/widgets"
        xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps">

Questo identificatore verrà usato in un secondo momento, durante la creazione di un ID app nel portale per sviluppatori di Apple.Later, use this identifier when you create an App ID on Apple's developer portal. Se si crea un ID app diverso nel portale per sviluppatori, è necessario eseguire alcuni passaggi aggiuntivi più avanti in questa esercitazione.If you create a different App ID on the developer portal, you must take a few extra steps later in this tutorial. L'ID nell'elemento widget deve corrispondere all'ID app indicato nel portale per sviluppatori.The ID in the widget element must match the App ID on the developer portal.

Registrare l'app per le notifiche push nel portale per sviluppatori AppleRegister the app for push notifications on Apple's developer portal

Guardare un video che illustra una procedura simileWatch a video showing similar steps

Configurare Azure per l'invio di notifiche pushConfigure Azure to send push notifications

  1. In Mac avviare Keychain Access.On your Mac, launch Keychain Access. Aprire My Certificates (Certificati personali) in Categoria nella barra di spostamento sinistra.On the left navigation bar, under Category, open My Certificates. Trovare il certificato SSL scaricato nella sezione precedente e divulgare il contenuto.Find the SSL certificate you downloaded in the previous section, and disclose its contents. Selezionare solo il certificato (non selezionare la chiave privata) ed esportarlo.Select only the certificate (do not select the private key), and export it.
  2. Nel Portale di Azure fare clic su Browse All (Esplora tutto) > Servizi app e quindi scegliere il back-end dell'app per dispositivi mobili.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. In Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica.Under Settings, click App Service Push, and then click your notification hub name. Andare a Apple Push Notification Services > Carica certificato.Go to Apple Push Notification Services > Upload Certificate. Caricare il file con estensione p12, selezionando la modalità corretta, a seconda che il certificato SSL client di prima sia di produzione o sandbox.Upload the .p12 file, selecting the correct Mode (depending on whether your client SSL certificate from earlier is production or sandbox). Salvare le modifiche.Save any changes.

Il servizio è ora configurato per l'uso con le notifiche push in iOS.Your service is now configured to work with push notifications on iOS.

Verificare che l'ID app corrisponda all'app CordovaVerify that your App ID matches your Cordova app

Se l'ID app creato nell'account per sviluppatori Apple corrisponde già all'ID dell'elemento widget nel file config.xml, è possibile ignorare questo passaggio.If the App ID you created in your Apple Developer Account already matches the ID of the widget element in config.xml, you can skip this step. Se tuttavia gli ID non corrispondono, procedere come segue:However, if the IDs don't match, take the following steps:

  1. Eliminare la cartella platforms dal progetto.Delete the platforms folder from your project.
  2. Eliminare la cartella plugins dal progetto.Delete the plugins folder from your project.
  3. Eliminare la cartella node_modules dal progetto.Delete the node_modules folder from your project.
  4. Aggiornare l'attributo id dell'elemento widget nel file config.xml per usare l'ID app creato nell'account per sviluppatori Apple.Update the id attribute of the widget element in config.xml to use the App ID that you created in your Apple Developer Account.
  5. Ricompilare il progetto.Rebuild your project.
Testare le notifiche push nell'app iOSTest push notifications in your iOS app
  1. In Visual Studio verificare che sia selezionato iOS come destinazione di distribuzione e quindi scegliere Dispositivo per l'esecuzione nel dispositivo iOS connesso.In Visual Studio, make sure that iOS is selected as the deployment target, and then choose Device to run on your connected iOS device.

    È possibile eseguire il progetto in un dispositivo iOS connesso al PC usando iTunes.You can run on an iOS device connected to your PC using iTunes. Il simulatore iOS non supporta le notifiche push.The iOS Simulator does not support push notifications.

  2. Scegliere Esegui o premere F5 per compilare il progetto e avviare l'app in un dispositivo iOS, quindi fare clic su OK per accettare le notifiche push.Press the Run button or F5 in Visual Studio to build the project and start the app in an iOS device, then click OK to accept push notifications.

    Nota

    L'app richiede una conferma per le notifiche push durante la prima esecuzione.The app requests confirmation for push notifications during the first run.

  3. Nell'app digitare un'attività e fare clic sull'icona con il segno PIÙ (+).In the app, type a task, and then click the plus (+) icon.

  4. Verificare che venga ricevuta una notifica, quindi fare clic su OK per ignorarla.Verify that a notification is received, then click OK to dismiss the notification.

(Facoltativo) Configurare ed eseguire l'app in Windows(Optional) Configure and run on Windows

Questa sezione descrive l'esecuzione del progetto di un'app Apache Cordova nei dispositivi Windows 10. Il plug-in di push PhoneGap è supportato in Windows 10.This section is for running the Apache Cordova app project on Windows 10 devices (the PhoneGap push plugin is supported on Windows 10). Se non si usano dispositivi Windows, è possibile ignorare questa sezione.If you are not working with Windows devices, you can skip this section.

Registrare l'app di Windows per le notifiche push con WNSRegister your Windows app for push notifications with WNS

Per usare le opzioni di Store in Visual Studio, selezionare una destinazione Windows dall'elenco Piattaforme soluzione, ad esempio Windows-x64 o Windows-x86. Evitare Windows-AnyCPU per le notifiche push.To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, like Windows-x64 or Windows-x86 (avoid Windows-AnyCPU for push notifications).

  1. In Visual Studio Solution Explorer (Esplora soluzioni di Visual Studio), fare clic con il pulsante destro del mouse sul progetto app di Windows Store, quindi scegliere Store > Associa applicazione a Store.In Visual Studio Solution Explorer, right-click the Windows Store app project, and click Store > Associate App with the Store.

    Associa l’app con Windows Store

  2. Nella procedura guidata fare clic su Avanti e accedere con il proprio account Microsoft.In the wizard, click Next, and sign in with your Microsoft account. Immettere un nome per l'app in Riserva un nuovo nome dell'app, fare clic su Riserva.Type a name for your app in Reserve a new app name, and then click Reserve.
  3. Dopo la creazione della registrazione dell'app, selezionare il nuovo nome dell'app, fare clic su Avanti e quindi su Associa.After the app registration is successfully created, select the new app name, click Next, and then click Associate. Le informazioni di registrazione a Windows Store necessarie verranno aggiunte al manifesto dell'applicazione.This adds the required Windows Store registration information to the application manifest.
  4. Ripetere i passaggi 1 e 3 per il progetto app di Windows Phone Store usando la stessa registrazione creata in precedenza per l'app di Windows Store.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. Aprire il Windows Dev Center e accedervi con l'account Microsoft.Browse to the Windows Dev Center, and sign in with your Microsoft account. Fare clic sulla nuova registrazione di app in App personali, quindi espandere Servizi > Notifiche Push.Click the new app registration in My apps, and then expand Services > Push notifications.
  6. Nella pagina Notifiche Push fare clic su Live Services site (Sito di servizi Live) in Servizi notifica Push Windows (WNS) e App per dispositivi mobili di Microsoft Azure.On the Push notifications page, click Live Services site under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps. Prendere nota dei valori del SID pacchetto e del valore attuale in Segreto dell'applicazione.Make a note of the values of the Package SID and the current value in Application Secret.

    Impostazione dell’app nel centro per sviluppatori

    Importante

    Il segreto applicazione e il SID di pacchetto sono importanti credenziali di sicurezza.The application secret and package SID are important security credentials. Non condividere questi valori con altri utenti né distribuirli con l'app.Do not share these values with anyone or distribute them with your app.

Guardare un video che illustra una procedura simileWatch a video showing similar steps

Configurare l'hub di notifica per WNSConfigure the notification hub for WNS

  1. Nel Portale di Azure fare clic su Browse All (Esplora tutto) > Servizi app e quindi scegliere il back-end dell'app per dispositivi mobili.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. In Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica.Under Settings, click App Service Push, and then click your notification hub name.
  2. Andare in Windows (WNS), immettere la chiave di sicurezza (chiave privata client) e il SID di pacchetto ottenuti dal sito di servizi Live, quindi fare clic su Salva.Go to Windows (WNS), enter the Security key (client secret) and Package SID that you obtained from the Live Services site, and then click Save.

    Impostare la chiave WNS nel portale

Il back-end ora è configurato per poter inviare le notifiche push tramite WSN.Your back end is now configured to use WNS to send push notifications.

Configurare l'app Cordova per il supporto delle notifiche push di WindowsConfigure your Cordova app to support Windows push notifications

Aprire Progettazione configurazione facendo clic con il pulsante destro del mouse sul file config.xml e scegliendo Visualizza finestra di progettazione. Selezionare quindi la scheda Windows e scegliere Windows 10 in Versione Windows di destinazione.Open the configuration designer (right-click on config.xml and select View Designer), select the Windows tab, and choose Windows 10 under Windows Target Version.

Per supportare le notifiche push nelle compilazioni predefinite (debug), aprire il file build.json.To support push notifications in your default (debug) builds, open build.json file. Copiare la configurazione "release" nella configurazione di debug.Copy the "release" configuration to your debug configuration.

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

Dopo l'aggiornamento, il file build.json deve contenere il codice seguente:After the update, the build.json 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"
        }
    }

Compilare l'app e verificare che non siano presenti errori.Build the app and verify that you have no errors. A questo punto l'app client dovrebbe eseguire la registrazione per le notifiche dal back-end dell'app per dispositivi mobili.Your client app should now register for the notifications from the Mobile App backend. Ripetere questa sezione per ogni progetto Windows nella soluzione.Repeat this section for every Windows project in your solution.

Testare le notifiche push nell'app di WindowsTest push notifications in your Windows app

In Visual Studio verificare che sia selezionata una piattaforma Windows come destinazione di distribuzione, ad esempio 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. Per eseguire l'app in un PC con Windows 10 che ospita Visual Studio, scegliere Computer locale.To run the app on a Windows 10 PC hosting Visual Studio, choose Local Machine.

Premere il pulsante Esegui per compilare il progetto e avviare l'app.Press the Run button to build the project and start the app.

Nell'app digitare un nome per un nuovo elemento todoitem, quindi fare clic sull'icona del segno più (+) per aggiungerlo.In the app, type a name for a new todoitem, and then click the plus (+) icon to add it.

Assicurarsi di ricevere una notifica quando viene aggiunto l'elemento.Verify that a notification is received when the item is added.

Passaggi successiviNext Steps

Informazioni su come usare gli SDK.Learn how to use the SDKs.