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 quickstart 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 quickstart 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.For more information, see Work with the .NET back-end server SDK for Mobile Apps.

PrerequisitiPrerequisites

Per questa esercitazione si presuppone che sia disponibile un'applicazione Apache Cordova sviluppata con Visual Studio 2015.This tutorial assumes that you have an Apache Cordova application that was developed with Visual Studio 2015. Questo dispositivo deve essere eseguito su un emulatore Android di Google, un dispositivo Android, un dispositivo Windows o un dispositivo iOS.This device should run on Google Android Emulator, an Android device, a Windows device, or 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 passare a Servizi app e quindi selezionare il back-end dell'app.In the Azure portal, go to App Services, and then select your app back end. In Impostazioni selezionare Push.Under Settings, select Push.
  2. Per aggiungere una risorsa hub di notifica all'app selezionare Connetti.To add a notification hub resource to the app, select Connect. È possibile creare un hub o connettersi a uno esistente.You can either create a hub or connect to an existing one.

    Configurare un hub

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à questo hub di notifica per la connessione a un sistema PNS (Platform Notification System) per eseguire il push ai dispositivi.Later you 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 sezione.Watch 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. Questo processo si basa sulla funzionalità dei modelli di Hub di notifica di Azure, che abilita i push multipiattaforma.This process is powered by the template feature of Azure Notification Hubs, which enables 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.In Visual Studio, right-click the server project. Scegliere quindi Gestisci pacchetti NuGet.Then select Manage NuGet Packages. Cercare Microsoft.Azure.NotificationHubs e quindi selezionare Installa.Search for Microsoft.Azure.NotificationHubs, and then select Install. Questo processo installa la libreria Hub di notifica per l'invio di notifiche dal back-end.This process installs the Notification Hubs library for sending notifications from the back end.
  2. Nel progetto server aprire Controller > TodoItemController.cs.In the server project, open Controllers > TodoItemController.cs. Aggiungere quindi le istruzioni using seguenti:Then 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);
    
     // 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");
     }
    

    Questo processo invia una notifica modello contenente item.Text quando viene inserito un nuovo elemento.This process 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 in todoitem.js con il codice seguente: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 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;  
    

    Questo processo invia una notifica modello contenente item.text quando viene inserito un nuovo elemento.This process sends a template notification that contains the item.text when a new item is inserted.

  3. In caso di modifica del file nel computer locale, ripubblicare il progetto server.When you edit the file on your local computer, republish the server project.

Modificare l'app CordovaModify your Cordova app

Per assicurarsi che il progetto app Apache Cordova sia predisposto per la gestione delle notifiche push, installare il plug-in di push di Cordova ed eventuali servizi push specifici della piattaforma.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.

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

Se il progetto usa una versione di Apache Cordova precedente alla 6.1.1, aggiornare il progetto client.If your project uses a version of Apache Cordova that's earlier than version 6.1.1, update the client project. Per aggiornare il progetto, seguire questa procedura:To update the project, take the following steps:

  • Fare clic con il pulsante destro del mouse su config.xml per aprire la finestra di progettazione configurazione.To open the configuration designer, right-click config.xml.
  • Selezionare la scheda Piattaforme.Select the Platforms tab.
  • Nella casella di testo Cordova CLI selezionare 6.1.1.In the Cordova CLI text box, select 6.1.1.
  • Per aggiornare il progetto, selezionare Compila e quindi Compila soluzione.To update the project, select Build, and then select Build Solution.

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 consente di gestire le notifiche push di rete.The phonegap-plugin-push plugin handles network push notifications.

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

Dal prompt dei comandi:From the command-prompt:

Eseguire il comando seguente:Run 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.In Solution Explorer, open the config.xml file. Selezionare quindi Plug-in > Personalizzato.Next, select Plugins > Custom. Selezionare Git come origine dell'installazione.Then select Git as the installation source.

  2. Immettere https://github.com/phonegap/phonegap-plugin-push come origine.Enter https://github.com/phonegap/phonegap-plugin-push as the source.

    Aprire il file config.xml in Esplora soluzioni

  3. Selezionare la freccia accanto all'origine dell'installazione.Select the arrow next to the installation source.

  4. 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, such as 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 the config.xml file later.

    Nota

    A partire dalla versione 2.0.0, per configurare l'ID mittente, è necessario installare google-services.json nella cartella radice del progetto.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. Per altre informazioni, vedere la documentazione sull'installazione.For more information, see the installation documentation.

  5. Selezionare Aggiungi.Select 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.Add the Device plugin from the Core plugins list. Per trovarlo, selezionare Plug-in > Base. Questo plug-in è necessario per ottenere il nome della piattaforma.(To find it, select Plugins > Core.) You need this plugin to obtain the platform name.

Registrare il dispositivo all'avvio dell'applicazioneRegister your device when the application starts

Viene inizialmente incluso un codice minimo per Android.Initially, we include some minimal code for Android. In un secondo momento è possibile modificare l'applicazione per eseguirla in iOS o Windows 10.Later you can modify the app to run on iOS or Windows 10.

  1. Aggiungere una chiamata a registerForPushNotifications durante il callback per il processo di accesso.Add a call to registerForPushNotifications during the callback for the sign-in process. In alternativa, è possibile aggiungerla nella parte finale del metodo 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);
    

    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

Dal momento che la destinazione è inizialmente la piattaforma di Google Android, è necessario abilitare Firebase Cloud Messaging.Since you 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, selezionare Add Firebase to your Android app (Aggiungi Firebase all'app Android).After you create your project, select Add Firebase to your Android app. Seguire quindi le istruzioni visualizzate.Then follow the instructions that are provided.

    Aggiungere Firebase all'app Android

  3. Nella console di Firebase selezionare il file COG per il progetto.In the Firebase console, select the cog for your project. Selezionare quindi Project Settings (Impostazioni progetto).Then select Project Settings.

    Selezionare Project Settings (Impostazioni progetto)

  4. Selezionare la scheda General (Generale) nelle impostazioni del progetto.Select the General tab in your project settings. Scaricare quindi il file google-services.json che contiene la chiave API del server e l'ID client.Then download the google-services.json file that contains the Server API key and Client ID.
  5. Selezionare la scheda Cloud Messaging nelle impostazioni del progetto e quindi copiare il valore di Legacy server key (Chiave server legacy).Select the Cloud Messaging tab in your project settings, and then copy the value of the Legacy server key. Questo valore verrà usato per configurare i criteri di accesso all'hub di notifica.You use this value to configure the notification hub access policy.

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

  1. Nel portale di Azure selezionare Esplora tutto > Servizi app.In the Azure portal, select Browse All > App Services. Selezionare quindi il back-end di App per dispositivi mobili.Then select your Mobile Apps back end.
  2. In Impostazioni selezionare Push.Under Settings, select Push. Selezionare quindi Configura servizi di notifica push.Then select Configure push notification services.
  3. Passare a Google (GCM).Go to Google (GCM). Immettere la chiave del server FCM legacy ottenuta dalla console Firebase e quindi selezionare Salva.Enter the FCM legacy server key that you obtained from the Firebase console, and then select 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.In your Cordova app, open config.xml. Sostituire quindi Your_Project_ID con l'ID progetto numerico dell'app indicato nella Console per gli sviluppatori di 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>

Aprire index.js.Open index.js. Aggiornare il codice in modo da usare l'ID progetto numerico.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: {}
    });

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 eseguire la procedura seguente:Take the following steps on your Android phone:

  1. Passare a Settings (Impostazioni) > About phone (Info sul telefono).Go to Settings > About phone. Toccare Build number (Numero build) circa sette volte finché non viene abilitata la modalità sviluppatore.Then tap the Build number until developer mode is enabled (about seven times).
  2. Tornare in Settings (Impostazioni) > Developer Options (Opzioni per gli sviluppatori) e abilitare USB debugging (Debug USB).Back in Settings > Developer Options, enable USB debugging. Collegare quindi il dispositivo Android al computer di sviluppo con un cavo USB.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 selezionare Strumenti > Android > Android SDK Manager.In Visual Studio, select Tools > Android > Android SDK Manager. Espandere la cartella Extras.Then expand the Extras folder. Selezionare le caselle appropriate per assicurarsi che vengono installati tutti gli SDK seguenti:Check the appropriate boxes to ensure 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. Selezionare Install Packages (Installa pacchetti).Select Install Packages. Attendere quindi il completamento dell'installazione.Then wait for the installation to finish.

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 eseguendo l'app ed inserendo elementi nella tabella TodoItem.You can now test push notifications by running the app and inserting items in the TodoItem table. È possibile eseguire il test dallo stesso dispositivo oppure da 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 back end. 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 runs the application. Sarà quindi possibile interagire con l'applicazione dal dispositivo.You can then interact with the application on the device.

    Le applicazioni per la condivisione dello schermo come Mobizen possono facilitare lo sviluppo di applicazioni Android.Screen-sharing applications such as Mobizen can assist you in developing Android applications. 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: quando si usa un emulatore, sono previsti ulteriori passaggi di configurazione.On an Android emulator: There are additional configuration steps that are required when you're using 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.

    Android Virtual Device Manager

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

    Aggiungere un account Google al dispositivo Android selezionando App > Impostazioni > Aggiungi account.Add a Google account to the Android device by selecting Apps > Settings > Add account. Seguire quindi le istruzioni.Then follow the prompts.

    Aggiungere un account Google al dispositivo Android

    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.

    Visualizzare la notifica

(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 aren't 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 compilare l'app per iOS da Visual Studio.The steps in the setup guide are required for building the app 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 by using the remote build agent on a service like MacInCloud. Per altre informazioni, vedere Eseguire l'app iOS nel cloud.For more information, 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 quindi 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 then 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 quindi divulgarne il contenuto.Find the SSL certificate that you downloaded in the previous section, and then disclose its contents. Selezionare solo il certificato (non la chiave privata),Select only the certificate (do not select the private key). quindi esportarlo.Then export it.
  2. Nel portale di Azure selezionare Esplora tutto > Servizi app.In the Azure portal, select Browse All > App Services. Selezionare quindi il back-end di App per dispositivi mobili.Then select your Mobile Apps back end.
  3. In Impostazioni selezionare App Service Push (Push servizio app).Under Settings, select App Service Push. Selezionare quindi il nome dell'hub di notifica.Then select your notification hub name.
  4. 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 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. 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 in modo da usare l'ID app creato nell'account per sviluppatori 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. 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.In Visual Studio, make sure that iOS is selected as the deployment target. Selezionare quindi Dispositivo per eseguire le notifiche push sul dispositivo iOS connesso.Then select Device to run the push notifications on your connected iOS device.

    È possibile eseguire le notifiche push in un dispositivo iOS connesso al PC tramite iTunes.You can run the push notifications on an iOS device that's connected to your PC with 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.Select the Run button or F5 in Visual Studio to build the project and start the app in an iOS device. Fare quindi clic su OK per accettare le notifiche push.Then select 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 quindi fare clic sull'icona con il segno PIÙ (+).In the app, type a task, and then select the plus (+) icon.

  4. Verificare di aver ricevuto una notifica.Verify that a notification was received. Fare clic su OK per eliminare la notifica.Then select OK to dismiss the notification.

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

Questa sezione descrive come eseguire il progetto di un'app Apache Cordova nei dispositivi Windows 10. Il plug-in di push PhoneGap è supportato in 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). 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, come Windows-x64 o Windows-x86.To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, such as Windows-x64 or Windows-x86. Evitare Windows-AnyCPU per le notifiche push.(Avoid Windows-AnyCPU for push notifications.)

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

    Associa l’app con Windows Store

  2. Nella procedura guidata selezionare Avanti.In the wizard, select Next. Accedere quindi con il proprio account Microsoft.Then sign in with your Microsoft account. In Riserva un nuovo nome dell'app digitare un nome per l'app e quindi selezionare Riserva.In Reserve a new app name, type a name for your app, and then select Reserve.
  3. Al termine della creazione della registrazione dell'app, selezionare il nuovo nome dell'app.After the app registration is successfully created, select the new app name. Selezionare Avanti e quindi Associa.Select Next, and then select Associate. Questo processo aggiunge le informazioni di registrazione a Windows Store necessarie al manifesto dell'applicazione.This process 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. Passare a Windows Dev Center e quindi accedere con il proprio account Microsoft.Go to the Windows Dev Center, and then sign in with your Microsoft account. In Le mie app selezionare la nuova registrazione di app.In My apps, select the new app registration. Espandere quindi Servizi > Notifiche push.Then expand Services > Push notifications.
  6. Nella pagina Notifiche push selezionare il sito dei servizi Live in Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps (Servizi notifica Push Windows (WNS) e app per dispositivi mobili di Microsoft Azure).On the Push notifications page, under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps, select Live Services site. 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.Don't 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 selezionare Esplora tutto > Servizi app.In the Azure portal, select Browse All > App Services. Selezionare quindi il back-end di App per dispositivi mobili.Then select your Mobile Apps back end. In Impostazioni selezionare App Service Push (Push servizio app).Under Settings, select App Service Push. Selezionare quindi il nome dell'hub di notifica.Then select your notification hub name.
  2. Passare a Windows (WNS).Go to Windows (WNS). Immettere quindi la chiave di sicurezza (segreto client) e il SID pacchetto ottenuti dal sito dei servizi Live.Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. Selezionare quindi Salva.Next, select 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

Fare clic con il pulsante destro su config.xml per aprire la finestra di progettazione configurazione.Open the configuration designer by right-clicking config.xml. Selezionare quindi Progettazione viste.Then select View Designer. Selezionare quindi la scheda Windows e scegliere Windows 10 in Versione Windows di destinazione.Next, select the Windows tab, and then select 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 the build.json file. Copiare quindi la configurazione "release" nella configurazione di debug.Then 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 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"
        }
    }

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 di App per dispositivi mobili.Your client app should now register for the notifications from the Mobile Apps back end. 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 that's hosting Visual Studio, choose Local Machine.

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

  2. Nell'app digitare un nome per un nuovo elemento todoitem, quindi selezionare l'icona del segno più (+) per aggiungerlo.In the app, type a name for a new todoitem, and then select 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 seguenti:Learn how to use the following SDKs: