Aggiungere notifiche push all'app di WindowsAdd push notifications to your Windows app

OverviewOverview

In questa esercitazione vengono aggiunte notifiche push al progetto avvio rapido di Windows, in modo che una notifica push venga inviata al dispositivo a ogni inserimento di record.In this tutorial, you add push notifications to the Windows 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, sarà necessario aggiungere il pacchetto di estensione di notifica push.If you do not use the downloaded quick start server project, you will 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.See Work with the .NET backend server SDK for Azure Mobile Apps for more information.

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.

Registrare l'app per le notifiche pushRegister your app for push notifications

È necessario inviare l'app a Windows Store, quindi configurare il progetto server in modo che venga eseguita l'integrazione con Servizi notifica Windows per l'invio di notifiche push.You need to submit your app to the Windows Store, then configure your server project to integrate with Windows Notification Services (WNS) to send push.

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

    Associa l’app con Windows Store

  2. Nella procedura guidata fare clic su Avanti, effettuare l'accesso con l'account Microsoft, immettere un nome per l'app in Riserva un nuovo nome dell'app e quindi fare clic su Reserva.In the wizard, click Next, sign in with your Microsoft account, type a name for your app in Reserve a new app name, 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. Passare a Windows Dev Center, accedere con l'account Microsoft, fare clic sulla nuova registrazione di app in App personali, quindi espandere Servizi > Notifiche push.Navigate to the Windows Dev Center, sign-in with your Microsoft account, click the new app registration in My apps, then expand Services > Push notifications.
  5. Nella pagina Notifiche push fare clic su Sito di servizi Live in Servizi mobili di Microsoft Azure.In the Push notifications page, click Live Services site under Microsoft Azure Mobile Services.
  6. Nella pagina di registrazione prendere nota del valore in Segreti applicazione e SID pacchetto. Questi valori verranno utilizzati successivamente per configurare il back-end dell'app per dispositivi mobili.In the registration page, make a note of the value under Application secrets and the Package SID, which you will next use to configure your mobile app backend.

    Associa l’app con Windows Store

    Importante

    Il segreto client e il SID di pacchetto sono importanti credenziali di sicurezza.The client 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. L' ID applicazione viene usato con il segreto per configurare l'autenticazione dell'account Microsoft.The Application Id is used with the secret to configure Microsoft Account authentication.

Configurare il back-end per l'invio di notifiche pushConfigure the backend to send push notifications

  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.

Aggiornare il server per l'invio di notifiche pushUpdate the server to send push notifications

Usare la procedura corrispondente al tipo di progetto di back-end in corso:— back-end .NET o back-end Node.js.Use the procedure below that matches your backend project type—either .NET backend or Node.js backend.

Progetto di back-end .NET.NET backend project

  1. In Visual Studio fare clic con il pulsante destro del mouse sul progetto server, scegliere Gestisci pacchetti NuGet, cercare Microsoft.Azure.NotificationHubs e quindi fare clic su Installa.In Visual Studio, right-click the server project and click Manage NuGet Packages, search for Microsoft.Azure.NotificationHubs, then click Install. Verrà installata la libreria client dell'Hub di notifica.This installs the Notification Hubs client library.
  2. Espandere Controller, aprire TodoItemController.cs e aggiungere le istruzioni using seguenti:Expand Controllers, open 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 the notification hub client.
     NotificationHubClient hub = NotificationHubClient
         .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
     // Define a WNS payload
     var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
                             + item.Text + @"</text></binding></visual></toast>";
     try
     {
         // Send the push notification.
         var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);
    
         // 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 codice indica all'hub di notifica di inviare una notifica push dopo l'inserimento di un nuovo elemento.This code tells the notification hub to send a push notification after a new item is insertion.

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

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

  1. Scaricare il progetto di avvio rapido (se non è ancora stato scaricato) oppure usare l'editor online del portale di Azure.If you haven't already done so, download the quickstart project or else use the online editor in the Azure portal.
  2. Sostituire il codice esistente nel file todoitem.js file con il codice seguente:Replace the existing code in the todoitem.js file 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 WNS payload that contains the new item Text.
     var payload = "<toast><visual><binding template=\ToastText01\><text id=\"1\">"
                                 + context.item.text + "</text></binding></visual></toast>";
    
     // 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 WNS native toast notification.
                 context.push.wns.sendToast(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 Todo, viene inviata una notifica popup WNS contenente l'elemento item.text.This sends a WNS toast notification that contains the item.text when a new todo 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.

Aggiungere notifiche push all'appAdd push notifications to your app

L'app dovrà quindi registrarsi per le notifiche push all'avvio.Next, your app must register for push notifications on start-up. Se l'autenticazione è già stata abilitata, verificare che l'utente esegua l'accesso prima di registrarsi per le notifiche push.When you have already enabled authentication, make sure that the user signs-in before trying to register for push notifications.

  1. Aprire il file di progetto App.xaml.cs e aggiungere le istruzioni using seguenti:Open the App.xaml.cs project file and add the following using statements:

     using System.Threading.Tasks;
     using Windows.Networking.PushNotifications;
    
  2. Nello stesso file aggiungere la seguente definizione del metodo InitNotificationsAsync alla classe App:In the same file, add the following InitNotificationsAsync method definition to the App class:

     private async Task InitNotificationsAsync()
     {
         // Get a channel URI from WNS.
         var channel = await PushNotificationChannelManager
             .CreatePushNotificationChannelForApplicationAsync();
    
         // Register the channel URI with Notification Hubs.
         await App.MobileService.GetPush().RegisterAsync(channel.Uri);
     }
    

    Questo codice consente di recuperare il valore di ChannelURI per l'app da Servizi notifica Push Windows e quindi di registrarlo con l'app per dispositivi mobili del servizio app.This code retrieves the ChannelURI for the app from WNS, and then registers that ChannelURI with your App Service Mobile App.

  3. All'inizio del gestore eventi OnLaunched nel file App.xaml.cs aggiungere il modificatore async alla definizione del metodo e quindi aggiungere la seguente chiamata al nuovo metodo InitNotificationsAsync, come illustrato di seguito:At the top of the OnLaunched event handler in App.xaml.cs, add the async modifier to the method definition and add the following call to the new InitNotificationsAsync method, as in the following example:

     protected async override void OnLaunched(LaunchActivatedEventArgs e)
     {
         await InitNotificationsAsync();
    
         // ...
     }
    

    In tal modo si garantirà che il valore di ChannelURI temporaneo venga registrato ogni volta che l'applicazione viene avviata.This guarantees that the short-lived ChannelURI is registered each time the application is launched.

  4. Ricompilare il progetto dell'app UWP.Rebuild your UWP app project. L'app è ora pronta per ricevere notifiche di tipo avviso popup.Your app is now ready to receive toast notifications.

Testare le notifiche push nell'appTest push notifications in your app

  1. Fare clic con il pulsante destro del mouse sul progetto di Windows Store, selezionare Imposta come progetto di avvioe premere il tasto F5 per eseguire l'app di Windows Store.Right-click the Windows Store project, click Set as StartUp Project, then press the F5 key to run the Windows Store app.

    All'avvio dell'app, il dispositivo viene registrato per le notifiche push.After the app starts, the device is registered for push notifications.

  2. Arrestare l'app di Windows Store e ripetere i passaggi precedenti per eseguire l'app di Windows Phone Store.Stop the Windows Store app and repeat the previous step for the Windows Phone Store app.

    A questo punto, entrambi i dispositivi sono stati registrati per la ricezione delle notifiche push.At this point, both devices are registered to receive push notifications.

  3. Eseguire nuovamente l'app di Windows Store, digitare del testo in Inserisci TodoItem e quindi fare clic su Salva.Run the Windows Store app again, and type text in Insert a TodoItem, and then click Save.

    Note that after the insert completes, both the Windows Store and the Windows Phone apps receive a push notification from WNS. The notification is displayed on Windows Phone even when the app isn't running.
    
    ![](./media/app-service-mobile-windows-universal-test-push/mobile-quickstart-push5-wp8.png)
    

Passaggi successiviNext steps

Altre informazioni sulle notifiche push:Learn more about push notifications:

È consigliabile proseguire con una delle esercitazioni seguenti:Consider continuing on to one of the following tutorials:

  • Aggiungere l'autenticazione all'app WindowsAdd authentication to your app
    Informazioni sull'autenticazione degli utenti dell'app con un provider di identità.Learn how to authenticate users of your app with an identity provider.
  • Abilitare la sincronizzazione offline per l'appEnable offline sync for your app
    : informazioni su come aggiungere il supporto offline all'app usando il back-end di un'app per dispositivi mobili.Learn how to add offline support your app using an Mobile App backend. La sincronizzazione offline consente agli utenti finali di interagire con un'app—visualizzando, aggiungendo e modificando i dati—anche se non è disponibile una connessione di rete.Offline sync allows end-users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection.