Добавление push-уведомлений в приложение WindowsAdd push notifications to your Windows app

Примечание

Центр приложений Visual Studio — это инвестиции в новые и интегрированные службы, предназначенные для разработки мобильных приложений.Visual Studio App Center is investing in new and integrated services central to mobile app development. Разработчики могут использовать службы сборки, тестирования и распространения для настройки конвейера непрерывной интеграции и доставки.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. После развертывания приложения разработчики могут отслеживать состояние и использование своих приложений с помощью служб аналитики и диагностики , а также привлекать пользователей с помощью службы push-уведомлений .Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Разработчики также могут использовать проверку подлинности для аутентификации пользователей и службы данных , чтобы сохранять и синхронизировать данные приложений в облаке.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Посетите Центр приложений уже сегодня.Check out App Center today.

ОбзорOverview

В этом руководстве мы добавим push-уведомления в простое приложение Windows, чтобы при каждом добавлении новой записи на устройство отправлялось push-уведомление.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.

Если вы не используете скачанный проект сервера, необходимо добавить пакет расширений для push-уведомлений.If you do not use the downloaded quick start server project, you will need the push notification extension package. Дополнительные сведения о пакетах расширений для сервера см. в статье Работа с пакетом SDK для внутреннего сервера .NET для мобильных приложений Azure.See Work with the .NET backend server SDK for Azure Mobile Apps for more information.

Настройка концентратора уведомленийConfigure a Notification Hub

Компонент мобильных приложений в службе приложений Azure использует Центры уведомлений Azure для отправки push-уведомлений, поэтому вам нужно настроить центр уведомлений для мобильного приложения.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. На портал Azure щелкните Службы приложений, а затем выберите серверную часть приложения.In the Azure portal, go to App Services, and then select your app back end. В разделе Параметры выберите Push.Under Settings, select Push.

  2. Чтобы добавить в приложение ресурс концентратора уведомлений, нажмите кнопку Подключить.To add a notification hub resource to the app, select Connect. Вы можете создать центр или подключиться к существующему.You can either create a hub or connect to an existing one.

    Настройка концентратора

Теперь центр уведомлений подключен к серверной части проекта вашего мобильного приложения.Now you have connected a notification hub to your Mobile Apps back-end project. Позднее вы настроите этот концентратор уведомлений, чтобы подключиться к системе отправки уведомлений платформы (PNS), которая отправляет push-уведомления на устройства.Later you configure this notification hub to connect to a platform notification system (PNS) to push to devices.

Регистрация приложения для работы с push-уведомлениямиRegister your app for push notifications

Вам нужно отправить свое приложение в Microsoft Store, а затем настроить в проекте сервера интеграцию с Windows Notification Services (WNS) для отправки push-уведомлений.You need to submit your app to the Microsoft Store, then configure your server project to integrate with Windows Notification Services (WNS) to send push.

  1. В обозревателе решений Visual Studio щелкните правой кнопкой мыши проект приложения UWP, щелкните Магазин > Связать приложение с Магазином… .In Visual Studio Solution Explorer, right-click the UWP app project, click Store > Associate App with the Store....

    Сопоставление приложения с Microsoft Store

  2. В окне мастера нажмите кнопку Далее, выполните вход с помощью учетной записи Майкрософт, введите имя приложения в поле Зарезервировать новое имя приложения и нажмите кнопку Зарезервировать.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. После успешного создания регистрации приложения выберите новое имя приложения, нажмите кнопку Далее, а затем кнопку Связать.After the app registration is successfully created, select the new app name, click Next, and then click Associate. Это позволяет добавить необходимые регистрационные данные Microsoft Store в манифест приложения.This adds the required Microsoft Store registration information to the application manifest.

  4. Перейдите на портал регистрации приложений и войдите с помощью своей учетной записи Майкрософт.Navigate to the Application Registration Portal and sign in with your Microsoft account. Щелкните приложение для Microsoft Store, которое вы сопоставили на предыдущем шаге.Click the Windows Store app you associated in the previous step.

  5. На странице регистрации запишите значения полей Секреты приложения и SID пакета, которые вам понадобятся позже при настройке серверной части мобильного приложения.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.

    Сопоставление приложения с Microsoft Store

    Важно!

    Секрет клиента и ИД безопасности пакета — это важные учетные данные для безопасного доступа.The client secret and package SID are important security credentials. Не сообщайте никому эти значения и не распространяйте их вместе со своим приложением.Do not share these values with anyone or distribute them with your app. Идентификатор приложения используется с секретным кодом для настройки аутентификации учетной записи Майкрософт .The Application Id is used with the secret to configure Microsoft Account authentication.

В разделе об использовании Центра приложений также содержатся инструкции по настройке приложений UWP для push-уведомлений.App Center also has instructions for configuring UWP apps for push notifications.

Настройка серверной части для отправки push-уведомленийConfigure the backend to send push notifications

  1. На портале Azure последовательно выберите Browse All (Просмотреть все) > Службы приложений.In the Azure portal, select Browse All > App Services. Выберите серверную часть для функции "Мобильные приложения".Then select your Mobile Apps back end. В разделе Параметры выберите Push-уведомления службы приложений.Under Settings, select App Service Push. Затем выберите имя концентратора уведомлений.Then select your notification hub name.

  2. Откройте Windows (WNS) .Go to Windows (WNS). Ведите ключ безопасности (секрет клиента) и ИД безопасности пакета, полученные на сайте служб Live.Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. Щелкните Сохранить.Next, select Save.

    Указание ключа WNS на портале

Вы настроили серверную часть на использование WNS для отправки push-уведомлений.Your back end is now configured to use WNS to send push notifications.

Обновление сервера для отправки push-уведомленийUpdate the server to send push notifications

Используйте приведенную ниже процедуру, которая соответствует типу вашего серверного проекта — серверный проект .NET или серверный проект Node.js.Use the procedure below that matches your backend project type—either .NET backend or Node.js backend.

Серверный проект .NET.NET backend project

  1. В Visual Studio щелкните правой кнопкой мыши серверный проект, затем щелкните Управление пакетами NuGet, найдите пакет Microsoft.Azure.NotificationHubs и нажмите кнопку Установить.In Visual Studio, right-click the server project and click Manage NuGet Packages, search for Microsoft.Azure.NotificationHubs, then click Install. Будет установлена клиентская библиотека центров уведомлений.This installs the Notification Hubs client library.

  2. Разверните Контроллеры, откройте TodoItemController.cs и добавьте следующие операторы using: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. В метод PostTodoItem добавьте следующий код после вызова 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");
    }
    

    Этот код заставляет центр уведомлений отправить push-уведомление после вставки элемента задачи.This code tells the notification hub to send a push notification after a new item is insertion.

  4. Повторная публикация серверного проектаRepublish the server project.

Серверный проект Node.jsNode.js backend project

  1. Настройте серверный проект.Set up your backend project.

  2. Замените существующий код в файле todoitem.js следующим кодом: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 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;
    

    При вставке нового элемента todo будет отправляться всплывающее уведомление WNS, содержащее item.text.This sends a WNS toast notification that contains the item.text when a new todo item is inserted.

  3. При редактировании этого файла на локальном компьютере повторно опубликуйте серверный проект.When editing the file on your local computer, republish the server project.

Добавление push-уведомлений в приложениеAdd push notifications to your app

Затем приложение необходимо зарегистрировать для получения push-уведомлений при запуске.Next, your app must register for push notifications on start-up. Если аутентификация уже включена, убедитесь, что пользователь выполняет вход прежде, чем пытается зарегистрироваться для использования push-уведомлений.When you have already enabled authentication, make sure that the user signs-in before trying to register for push notifications.

  1. Откройте файл проекта App.xaml.cs и добавьте следующие операторы using.Open the App.xaml.cs project file and add the following using statements:

    using System.Threading.Tasks;
    using Windows.Networking.PushNotifications;
    
  2. В том же файле добавьте следующее определение метода InitNotificationsAsync в класс 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);
    }
    

    Этот код возвращает ChannelURI для приложения из WNS, а затем регистрирует ChannelURI в мобильном приложении службы приложений.This code retrieves the ChannelURI for the app from WNS, and then registers that ChannelURI with your App Service Mobile App.

  3. В верхней части обработчика событий OnLaunched в файле App.xaml.cs добавьте в определение метода модификатор async, а в новый метод InitNotificationsAsync добавьте следующий вызов (как в приведенном ниже примере).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();
    
        // ...
    }
    

    Это обеспечит регистрацию кратковременного ChannelURI при каждом запуске приложения.This guarantees that the short-lived ChannelURI is registered each time the application is launched.

  4. Перестройте проект приложения UWP.Rebuild your UWP app project. Теперь приложение готово к получению всплывающих уведомлений.Your app is now ready to receive toast notifications.

Тестирование push-уведомлений в приложенииTest push notifications in your app

  1. Щелкните правой кнопкой мыши проект Магазина Windows, выберите пункт Назначить запускаемым проектоми нажмите клавишу F5, чтобы запустить приложение Магазина Windows.Right-click the Windows Store project, click Set as StartUp Project, then press the F5 key to run the Windows Store app.

    После запуска приложения выполняется регистрация устройства для получения push-уведомлений.After the app starts, the device is registered for push notifications.

  2. Остановите приложение Магазина Windows и повторите предыдущий шаг для приложения Магазина Windows Phone.Stop the Windows Store app and repeat the previous step for the Windows Phone Store app.

    Теперь оба устройства зарегистрированы для получения push-уведомлений.At this point, both devices are registered to receive push notifications.

  3. Запустите приложение Магазина Windows и введите текст в поле Insert a TodoItem (Вставить TodoItem), после чего нажмите кнопку Сохранить.Run the Windows Store app again, and type text in Insert a TodoItem, and then click Save.

    Обратите внимание: после завершения вставки как приложение Магазина Windows, так и приложение Windows Phone получают push-уведомление из WNS.Note that after the insert completes, both the Windows Store and the Windows Phone apps receive a push notification from WNS. Уведомление отображается на устройстве Windows Phone, даже если приложение не запущено.The notification is displayed on Windows Phone even when the app isn't running.

Дальнейшие действияNext steps

Дополнительные сведения о push-уведомлениях:Learn more about push notifications:

Мы также рекомендуем изучить одно из следующих руководств:Consider continuing on to one of the following tutorials:

  • Добавление аутентификации в приложение. Сведения об аутентификации пользователей приложения с помощью поставщика удостоверений.Add authentication to your app Learn how to authenticate users of your app with an identity provider.
  • Включение автономной синхронизации для приложения. Узнайте, как добавить поддержку автономной работы приложения с помощью серверной части мобильного приложения.Enable offline sync for your app Learn how to add offline support your app using an Mobile App backend. Автономная синхронизация позволяет пользователям взаимодействовать с мобильным приложением — просматривать, добавлять или изменять данные — даже при отсутствии подключения к сети.Offline sync allows end-users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection.