Aggiungere notifiche push all'app Apache Cordova

Panoramica

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.

Se non si usa il progetto server di avvio rapido scaricato, è necessario aggiungere il pacchetto di estensione di notifica push. Per altre informazioni, vedere Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.

Prerequisiti

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.

Per completare questa esercitazione, sono necessari:

Configurare un hub di notifica

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.

  1. Nel Portale di Azure andare in Servizi app, quindi fare clic sul back-end dell'app. In Impostazioni fare clic su Push.
  2. Fare clic su Connetti per aggiungere una risorsa dell'hub di notifica all'app. È possibile creare un hub o connettersi a uno esistente.

A questo punto un hub di notifica è stato connesso al progetto di back-end dell'app per dispositivi mobili. In seguito si configurerà l'hub di notifica per la connessione a un Platform Notification System (PNS) per effettuare il push ai dispositivi.

Guardare un video che illustra la procedura disponibile in questa sezione

Aggiornare il progetto server

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. Questa operazione si basa sulla funzionalità dei modelli di Hub di notifica di Azure, che abilita i push multipiattaforma. I diversi client vengono registrati per le notifiche push usando i modelli e un unico push universale può raggiungere tutte le piattaforme client.

Scegliere una delle seguenti procedure che corrisponde al tipo di progetto di back-end—, che sia back-end .NET o back-end Node.js.

Progetto di back-end .NET

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto server, quindi scegliere Gestisci pacchetti NuGet. Cercare Microsoft.Azure.NotificationHubs, quindi fare clic su Installa. Consente di installare la libreria di Hub di notifica per l'invio di notifiche dal back-end.
  2. Nel progetto server aprire Controller > TodoItemController.cs e quindi aggiungere le istruzioni using seguenti:

     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:

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

  4. Pubblicare di nuovo il progetto server.

Progetto di back-end Node.js

  1. Se ancora non è stato fatto, scaricare il progetto di back-end di avvio rapido oppure usare l'editor online del Portale di Azure.
  2. Sostituire il codice esistente nel file todoitem.js con il codice seguente:

     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.

  3. Quando si modifica il file nel computer locale, ripubblicare il progetto server.

Modificare l'app Cordova

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.

Aggiornare la versione di Cordova nel progetto.

Se il progetto utilizza una versione di Apache Cordova precedente alla v6.1.1, aggiornare il progetto client. Per aggiornare il progetto:

  • Fare clic con il pulsante destro su config.xml per aprire la finestra di progettazione configurazione.
  • Selezionare la scheda Piattaforme.
  • Scegliere 6.1.1 nella casella di testo Cordova CLI.
  • Scegliere Compila, quindi Compila soluzione per aggiornare il progetto.

Installare il plug-in di push

Le applicazioni Apache Cordova non gestiscono in modo nativo le funzionalità del dispositivo o della rete. Queste funzionalità sono incluse nei plug-in che vengono pubblicati in npm o GitHub. Il plug-in phonegap-plugin-push viene usato per gestire le notifiche push di rete.

È possibile installare il plug-in di push in uno dei modi seguenti:

Dal prompt dei comandi:

Eseguire il comando seguente:

cordova plugin add phonegap-plugin-push

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

  2. Fare clic sulla freccia accanto all'origine dell'installazione.

  3. In SENDER_ID è possibile aggiungere l'ID numerico del progetto della Console per gli sviluppatori di Google, se l'ID è già disponibile. In caso contrario, immettere un valore segnaposto, ad esempio 777777. Se la destinazione è Android, sarà possibile aggiornare questo valore nel file config.xml in un secondo momento.
  4. Fare clic su Aggiungi.

Il plug-in di push è stato installato.

Installare il plug-in del dispositivo

Seguire la stessa procedura utilizzata per installare il plug-in di push. Aggiungere il plug-in del dispositivo dall'elenco di plug-in di base (fare clic su Plug-in > Base per trovarlo). Questo plug-in è necessario per ottenere il nome della piattaforma.

Registrare il dispositivo all'avvio dell'applicazione

Viene inizialmente incluso un codice minimo per Android. Modificare quindi l'applicazione per eseguirla su iOS o Windows 10.

  1. Aggiungere una chiamata a registerForPushNotifications durante il callback per il processo di accesso o nella parte inferiore del metodo onDeviceReady:

     // 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. È possibile chiamare registerForPushNotifications() ogni qualvolta è necessario.

  2. Aggiungere il nuovo metodo registerForPushNotifications come indicato di seguito:

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

(Facoltativo) Configurare ed eseguire l'app in Android

Completare questa sezione per abilitare le notifiche push per Android.

Abilitare Firebase Cloud Messaging

Poiché la destinazione iniziale è la piattaforma di Google Android, è necessario abilitare Firebase Cloud Messaging.

  1. Accedere alla console di Firebase. Creare un nuovo progetto Firebase se non è già disponibile.
  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.

  3. Nella console di Firebase fare clic sul file cog per il progetto e quindi fare clic su Impostazioni progetto.

  4. Fare clic sulla scheda Cloud Messaging nelle impostazioni del progetto e copiare il valore di Chiave server e ID mittente. 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.

Configurare il back-end dell'app per dispositivi mobili per inviare richieste push usando 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 Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica.
  2. Andare in Google (GCM), immettere la chiave del server FCM ottenuta dalla console Firebase, quindi fare clic su Salva.

Il servizio è ora configurato per l'uso di Firebase Cloud Messaging.

Configurare l'app Cordova per 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.

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

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

Configurare il dispositivo Android per il debug USB

Prima di poter distribuire l'applicazione al dispositivo Android, è necessario abilitare il debug USB. Sul telefono Android seguire questa procedura:

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

Per questo test è stato usato un dispositivo Google Nexus 5X con Android 6.0 (Marshmallow). Tuttavia, le tecniche sono comuni a qualsiasi versione moderna di Android.

Installare servizi Google Play

Il plug-in di push si basa su servizi Google Play Android per notifiche push.

  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.

    • Android 2.3 o versione successiva
    • Google Repository 27 o versione successiva
    • Google Play Services 9.0.2 o versione successiva
  2. Fare clic su Install Packages (Installa pacchetti) e attendere il completamento dell'installazione.

Le librerie attualmente necessarie sono elencate nella documentazione relativa all'installazione di phonegap-plugin-push.

Testare le notifiche push nell'app in Android

A questo punto è possibile testare le notifiche push. Eseguire l'applicazione e inserire elementi nella tabella TodoItem usando lo stesso dispositivo oppure un altro dispositivo, purché il back-end sia lo stesso. Testare l'app Cordova sulla piattaforma Android in uno dei modi seguenti:

  • In un dispositivo fisico: collegare il dispositivo Android al computer di sviluppo con un cavo USB. Invece di selezionare Emulatore Android di Google, selezionare Dispositivo. Visual Studio distribuisce l'applicazione nel dispositivo e quindi la esegue. Sarà quindi possibile interagire con l'applicazione dal dispositivo.

    Migliorare l'esperienza di sviluppo. Le applicazioni per la condivisione dello schermo come Mobizen possono facilitare lo sviluppo di un'applicazione Android. Mobizen proietta lo schermo Android su un Web browser sul PC.

  • In un emulatore Android: sono necessari altri passaggi di configurazione per l'esecuzione in un emulatore.

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

    Se si vuole usare un emulatore x86 più veloce, installare il driver HAXM e configurare l'emulatore per usarlo.

    Aggiungere un account Google al dispositivo Android facendo clic su Apps (App) > Settings (Impostazioni) > Add account (Aggiungi account), quindi seguire le istruzioni.

    Eseguire l'app todolist come fatto in precedenza e inserire un nuovo elemento todo. Questa volta, viene visualizzata un'icona di notifica nell'area di notifica. È possibile aprire la cassetta della notifica per visualizzare il testo completo della notifica.

(Facoltativo) Configurare ed eseguire l'app in iOS

Questa sezione illustra l'esecuzione del progetto Cordova in dispositivi iOS. Se non si usano dispositivi iOS, è possibile ignorare questa sezione.

Installare ed eseguire l'agente remotebuild per iOS in un computer Mac o un servizio cloud

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.

Verificare che sia possibile compilare l'app per iOS. I passaggi indicati nella guida alla configurazione sono necessari per la compilazione per iOS da Visual Studio. Se non è disponibile un computer Mac, è possibile eseguire la compilazione per iOS usando l'agente remotebuild in un servizio come MacInCloud. Per altre informazioni, vedere Eseguire l'app iOS nel cloud.

Nota

XCode 7 o versione successiva è necessario per usare il plug-in di push in iOS.

Trovare l'ID da usare come ID app

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. Nel codice XML seguente, l'ID è 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. Se si crea un ID app diverso nel portale per sviluppatori, è necessario eseguire alcuni passaggi aggiuntivi più avanti in questa esercitazione. L'ID nell'elemento widget deve corrispondere all'ID app indicato nel portale per sviluppatori.

Registrare l'app per le notifiche push nel portale per sviluppatori Apple

Guardare un video che illustra una procedura simile

Configurare Azure per l'invio di notifiche push

  1. In Mac avviare Keychain Access. Aprire My Certificates (Certificati personali) in Categoria nella barra di spostamento sinistra. Trovare il certificato SSL scaricato nella sezione precedente e divulgare il contenuto. Selezionare solo il certificato (non selezionare la chiave privata) ed esportarlo.
  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 Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica. Andare a Apple Push Notification Services > Carica certificato. Caricare il file con estensione p12, selezionando la modalità corretta, a seconda che il certificato SSL client di prima sia di produzione o sandbox. Salvare le modifiche.

Il servizio è ora configurato per l'uso con le notifiche push in iOS.

Verificare che l'ID app corrisponda all'app Cordova

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. Se tuttavia gli ID non corrispondono, procedere come segue:

  1. Eliminare la cartella platforms dal progetto.
  2. Eliminare la cartella plugins dal progetto.
  3. Eliminare la cartella node_modules dal progetto.
  4. Aggiornare l'attributo id dell'elemento widget nel file config.xml per usare l'ID app creato nell'account per sviluppatori Apple.
  5. Ricompilare il progetto.
Testare le notifiche push nell'app iOS
  1. In Visual Studio verificare che sia selezionato iOS come destinazione di distribuzione e quindi scegliere Dispositivo per l'esecuzione nel dispositivo iOS connesso.

    È possibile eseguire il progetto in un dispositivo iOS connesso al PC usando iTunes. Il simulatore iOS non supporta le notifiche push.

  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.

    Nota

    L'app richiede una conferma per le notifiche push durante la prima esecuzione.

  3. Nell'app digitare un'attività e fare clic sull'icona con il segno PIÙ (+).

  4. Verificare che venga ricevuta una notifica, quindi fare clic su OK per ignorarla.

(Facoltativo) Configurare ed eseguire l'app in 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. Se non si usano dispositivi Windows, è possibile ignorare questa sezione.

Registrare l'app di Windows per le notifiche push con 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.

  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.

    Associa l’app con Windows Store

  2. Nella procedura guidata fare clic su Avanti e accedere con il proprio account Microsoft. Immettere un nome per l'app in Riserva un nuovo nome dell'app, fare clic su Riserva.
  3. Dopo la creazione della registrazione dell'app, selezionare il nuovo nome dell'app, fare clic su Avanti e quindi su Associa. Le informazioni di registrazione a Windows Store necessarie verranno aggiunte al manifesto dell'applicazione.
  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.
  5. Aprire il Windows Dev Center e accedervi con l'account Microsoft. Fare clic sulla nuova registrazione di app in App personali, quindi espandere Servizi > Notifiche Push.
  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. Prendere nota dei valori del SID pacchetto e del valore attuale in Segreto dell'applicazione.

    Impostazione dell’app nel centro per sviluppatori

    Importante

    Il segreto applicazione e il SID di pacchetto sono importanti credenziali di sicurezza. Non condividere questi valori con altri utenti né distribuirli con l'app.

Guardare un video che illustra una procedura simile

Configurare l'hub di notifica per 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 Impostazioni fare clic su App Service Push (Push servizio app), quindi fare clic sul nome dell'hub di notifica.
  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.

    Impostare la chiave WNS nel portale

Il back-end ora è configurato per poter inviare le notifiche push tramite WSN.

Configurare l'app Cordova per il supporto delle notifiche push di Windows

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.

Per supportare le notifiche push nelle compilazioni predefinite (debug), aprire il file build.json. Copiare la configurazione "release" nella configurazione di debug.

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

Dopo l'aggiornamento, il file build.json deve contenere il codice seguente:

"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. A questo punto l'app client dovrebbe eseguire la registrazione per le notifiche dal back-end dell'app per dispositivi mobili. Ripetere questa sezione per ogni progetto Windows nella soluzione.

Testare le notifiche push nell'app di Windows

In Visual Studio verificare che sia selezionata una piattaforma Windows come destinazione di distribuzione, ad esempio Windows-x64 o Windows-x86. Per eseguire l'app in un PC con Windows 10 che ospita Visual Studio, scegliere Computer locale.

Premere il pulsante Esegui per compilare il progetto e avviare l'app.

Nell'app digitare un nome per un nuovo elemento todoitem, quindi fare clic sull'icona del segno più (+) per aggiungerlo.

Assicurarsi di ricevere una notifica quando viene aggiunto l'elemento.

Passaggi successivi

Informazioni su come usare gli SDK.