Lägga till push-meddelanden i din Windows-app

Översikt

I den här självstudien lägger du till push-meddelanden i Windows-snabbstartsprojektet så att ett push-meddelande skickas till enheten varje gång en post infogas.

Om du inte använder det nedladdade snabbstartsserverprojektet behöver du paketet för push-meddelandetillägget. Mer information finns i Arbeta med .NET-server-SDK för Azure Mobile Apps .

Konfigurera en notification hub

Mobile Apps-funktionen i Azure App Service använder Azure Notification Hubs för att skicka push-meddelanden, så du konfigurerar en meddelandehubb för din mobilapp.

  1. I Azure Portal går du till App Services och väljer sedan appens serverdel. Under Inställningar väljer du Push.

  2. Om du vill lägga till en meddelandehubbresurs i appen väljer du Anslut. Du kan antingen skapa en hubb eller ansluta till en befintlig.

    Konfigurera en hubb

Nu har du anslutit en meddelandehubb till ditt Mobile Apps-backend-projekt. Senare konfigurerar du den här meddelandehubben så att den ansluter till ett plattformsmeddelandesystem (PNS) för att push-överföra till enheter.

Registrera din app för push-meddelanden

Du måste skicka din app till Microsoft Store och sedan konfigurera serverprojektet så att det integreras med Windows Push Notification Services (WNS) för att skicka push-överföring.

  1. I Visual Studio Solution Explorer högerklickar du på UWP-appprojektet, klickar på Store>Associera app med Store....

    Associera appen med Microsoft Store

  2. I guiden klickar du på Nästa, loggar in med ditt Microsoft-konto, skriver ett namn på din app i Reservera ett nytt appnamn och klickar sedan på Reservera.

  3. När appregistreringen har skapats väljer du det nya appnamnet, klickar på Nästa och klickar sedan på Associera. Detta lägger till den nödvändiga registreringsinformationen för Microsoft Store i programmanifestet.

  4. Gå till programregistreringsportalen och logga in med ditt Microsoft-konto. Klicka på Den Windows Store-app som du associerade i föregående steg.

  5. På registreringssidan antecknar du värdet under Programhemligheter och paket-SID, som du kommer att använda för att konfigurera mobilappens serverdel.

    Associera appen med Microsoft Store

    Viktigt

    Klienthemligheten och paket-SID:et är viktiga säkerhetsuppgifter. Lämna aldrig ut dessa uppgifter till någon och distribuera dem inte tillsammans med din app. Program-ID:t används med hemligheten för att konfigurera Microsoft-kontoautentisering.

App Center har också instruktioner för att konfigurera UWP-appar för push-meddelanden.

Konfigurera serverdelen för att skicka push-meddelanden

  1. I Azure Portal väljer du Bläddra bland alla>App Services. Välj sedan din Mobile Apps-serverdel. Under Inställningar väljer du App Service Push. Välj sedan namnet på meddelandehubben.

  2. Gå till Windows (WNS). Ange sedan säkerhetsnyckeln (klienthemlighet) och paket-SID som du hämtade från Live Services-webbplatsen. Välj sedan Spara.

    Ange WNS-nyckeln i portalen

Serverdelen har nu konfigurerats för att använda WNS för att skicka push-meddelanden.

Uppdatera servern för att skicka push-meddelanden

Använd proceduren nedan som matchar din serverdelsprojekttyp– antingen .NET-serverdel eller Node.js serverdel.

.NET-serverdelsprojekt

  1. Högerklicka på serverprojektet i Visual Studio och klicka på Hantera NuGet-paket, sök efter Microsoft.Azure.NotificationHubs och klicka sedan på Installera. Då installeras Notification Hubs-klientbiblioteket.

  2. Expandera Kontrollanter, öppna TodoItemController.cs och lägg till följande med hjälp av -instruktioner:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. I metoden PostTodoItem lägger du till följande kod efter anropet till 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");
    }
    

    Den här koden instruerar meddelandehubben att skicka ett push-meddelande när ett nytt objekt har infogats.

  4. Publicera om serverprojektet.

Node.js serverdelsprojekt

  1. Konfigurera serverdelsprojektet.

  2. Ersätt den befintliga koden i todoitem.js-filen med följande:

    var azureMobileApps = require('azure-mobile-apps'),
    promises = require('azure-mobile-apps/src/utilities/promises'),
    logger = require('azure-mobile-apps/src/logger');
    
    var table = azureMobileApps.table();
    
    table.insert(function (context) {
    // For more information about the Notification Hubs JavaScript SDK,
    // see https://aka.ms/nodejshubs
    logger.info('Running TodoItem.insert');
    
    // Define the 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;
    

    Detta skickar ett WNS-popup-meddelande som innehåller item.text när ett nytt att göra-objekt infogas.

  3. När du redigerar filen på den lokala datorn publicerar du serverprojektet igen.

Lägg till push-meddelanden i appen

Därefter måste din app registrera sig för push-meddelanden vid start. När du redan har aktiverat autentisering kontrollerar du att användaren loggar in innan du försöker registrera dig för push-meddelanden.

  1. Öppna projektfilen App.xaml.cs och lägg till följande using instruktioner:

    using System.Threading.Tasks;
    using Windows.Networking.PushNotifications;
    
  2. I samma fil lägger du till följande InitNotificationsAsync-metoddefinition i appklassen :

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

    Den här koden hämtar ChannelURI för appen från WNS och registrerar sedan ChannelURI med din App Service Mobile App.

  3. Överst i OnLaunched-händelsehanteraren i App.xaml.cs lägger du till async-modifieraren i metoddefinitionen och lägger till följande anrop till den nya Metoden InitNotificationsAsync, som i följande exempel:

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

    Detta garanterar att den kortlivade ChannelURI:n registreras varje gång programmet startas.

  4. Återskapa ditt UWP-appprojekt. Appen är nu redo att ta emot popup-meddelanden.

Testa push-meddelanden i din app

  1. Högerklicka på Windows Store-projektet, klicka på Ange som startprojekt och tryck sedan på F5 för att köra Windows Store-appen.

    När appen startar registreras enheten för push-meddelanden.

  2. Stoppa Windows Store-appen och upprepa föregående steg för Windows Phone Store-appen.

    Nu är båda enheterna registrerade för att ta emot push-meddelanden.

  3. Kör Windows Store-appen igen och skriv text i Infoga en TodoItem och klicka sedan på Spara.

    Observera att när infogningen är klar får både Windows Store och Windows Phone-apparna ett push-meddelande från WNS. Meddelandet visas på Windows Phone även när appen inte körs.

Nästa steg

Läs mer om push-meddelanden:

Överväg att fortsätta med någon av följande självstudier:

  • Lägga till autentisering i appen Läs om hur du autentiserar användare i din app med en identitetsprovider.
  • Aktivera offlinesynkronisering för din app Lär dig hur du lägger till offlinestöd för din app med hjälp av en mobilappsserverdel. Med offlinesynkronisering kan slutanvändarna interagera med en mobilapp – visa, lägga till eller ändra data – även om det inte finns någon nätverksanslutning.