Skip to content

Files

Latest commit

author
JiayueHu
Dec 5, 2018
ae3bff9 · Dec 5, 2018

History

History
228 lines (167 loc) · 10.9 KB

app-service-mobile-windows-store-dotnet-get-started-push.md

File metadata and controls

228 lines (167 loc) · 10.9 KB
title description services documentationcenter author manager editor ms.assetid ms.service ms.workload ms.tgt_pltfrm ms.devlang ms.topic ms.date ms.author
Add push notifications to your Universal Windows Platform (UWP) app | Microsoft Docs
Learn how to use Azure App Service Mobile Apps and Azure Notification Hubs to send push notifications to your Universal Windows Platform (UWP) app.
app-service\mobile,notification-hubs
windows
conceptdev
crdun
6de1b9d4-bd28-43e4-8db4-94cd3b187aa3
app-service-mobile
mobile
mobile-windows
dotnet
article
10/12/2016
crdun

Add push notifications to your Windows app

[!INCLUDE app-service-mobile-selector-get-started-push]

Overview

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.

If you do not use the downloaded quick start server project, you will need the push notification extension package. See Work with the .NET backend server SDK for Azure Mobile Apps for more information.

Configure a Notification Hub

[!INCLUDE app-service-mobile-configure-notification-hub]

Register your app for push notifications

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. In Visual Studio Solution Explorer, right-click the UWP app project, click Store > Associate App with the Store....

    Associate app with 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. 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. Click the Windows Store app you associated in the previous step.

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

    Associate app with Microsoft Store

    [!IMPORTANT] 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.

App Center also has instructions for configuring UWP apps for push notifications.

Configure the backend to send push notifications

[!INCLUDE app-service-mobile-configure-wns]

Update the server to send push notifications

Use the procedure below that matches your backend project type—either .NET backend or Node.js backend.

.NET backend project

  1. 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. 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. 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");
    }

    This code tells the notification hub to send a push notification after a new item is insertion.

  4. Republish the server project.

Node.js backend project

  1. If you haven't already done so, download the quickstart project or else use the online editor in the Azure portal.

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

    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.

Add push notifications to your app

Next, your app must register for push notifications on start-up. When you have already enabled authentication, make sure that the user signs-in before trying to register for push notifications.

  1. Open the App.xaml.cs project file and add the following using statements:

    using System.Threading.Tasks;
    using Windows.Networking.PushNotifications;
  2. 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);
    }

    This code retrieves the ChannelURI for the app from WNS, and then registers that ChannelURI with your App Service Mobile App.

  3. 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();
    
        // ...
    }

    This guarantees that the short-lived ChannelURI is registered each time the application is launched.

  4. Rebuild your UWP app project. Your app is now ready to receive toast notifications.

Test push notifications in your app

[!INCLUDE app-service-mobile-windows-universal-test-push]

Next steps

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.