Free trial *Internet Service Required
  • On the page (jump to):

Push notifications to users by using Mobile Services

Windows Store C# Windows Store JavaScript Windows Phone 8 iOS

This topic extends the previous push notification tutorial by adding a new table to store Windows Push Notification Service (WNS) channel URIs. These channels can then be used to send push notifications to users of the Windows Store app.

You can watch a video of this tutorial by clicking the clip to the right.

watch the tutorial Play Video 20:29

This tutorial walks you through these steps to update push notifications in your app:

  1. Create the Channel table
  2. Update the app
  3. Update server scripts
  4. Verify the push notification behavior

This tutorial is based on the Mobile Services quickstart and builds on the previous tutorial Get started with push notifications. Before you start this tutorial, you must first complete Get started with push notifications.

Create a new table

  1. Log into the Windows Azure Management Portal, click Mobile Services, and then click your app.

  2. Click the Data tab, and then click Create.

    This displays the Create new table dialog.

  3. Keeping the default Anybody with the application key setting for all permissions, type Channel in Table name, and then click the check button.

    This creates the Channel table, which stores the channel URIs used to send push notifications separate from item data.

Next, you will modify the push notifications app to store data in this new table instead of in the TodoItem table.

Update your app

  1. In Visual Studio 2012 Express for Windows 8, open the project from the tutorial Get started with push notifications, open up file MainPage.xaml.cs, and remove the Channel property from the TodoItem class. It should now look like this:

    public class TodoItem
{
    public int Id { get; set; }


[JsonProperty(PropertyName = "text")]
public string Text { get; set; }


[JsonProperty(PropertyName = "complete")]
public bool Complete { get; set; }


}

  2. Replace the ButtonSave_Click event handler method with the original version of this method, as follows:

    private void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    var todoItem = new TodoItem { Text = TextInput.Text };
    InsertTodoItem(todoItem);
}

  3. Add the following code that creates a new Channel class:

    public class Channel
{
    public int Id { get; set; }


[JsonProperty(PropertyName = "uri")]
public string Uri { get; set; }


}

  4. Open the file App.xaml.cs and replace AcquirePushChannel method with the following code:

    private async void AcquirePushChannel()
{
   CurrentChannel = 
       await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();


   IMobileServiceTable<Channel> channelTable = App.MobileService.GetTable<Channel>();
   var channel = new Channel { Uri = CurrentChannel.Uri };
   await channelTable.InsertAsync(channel);
}

    This code inserts the current channel into the Channel table.

Update server scripts

  1. In the Management Portal, click the Data tab and then click the Channel table.

  2. In channel, click the Script tab and select Insert.

    This displays the function that is invoked when an insert occurs in the Channel table.

  3. Replace the insert function with the following code, and then click Save:

    function insert(item, user, request) {
    var channelTable = tables.getTable('Channel');
    channelTable
        .where({ uri: item.uri })
        .read({ success: insertChannelIfNotFound });
    function insertChannelIfNotFound(existingChannels) {
        if (existingChannels.length > 0) {
            request.respond(200, existingChannels[0]);
        } else {
            request.execute();
        }
    }
}

    This script checks the Channel table for an existing channel with the same URI. The insert only proceeds if no matching channel was found. This prevents duplicate channel records.

  4. Click TodoItem, click Script and select Insert.

  5. Replace the insert function with the following code, and then click Save:

    function insert(item, user, request) {
    request.execute({
        success: function() {
            request.respond();
            sendNotifications();
        }
    });


function sendNotifications() {
    var channelTable = tables.getTable('Channel');
    channelTable.read({
        success: function(channels) {
            channels.forEach(function(channel) {
                push.wns.sendToastText04(channel.uri, {
                    text1: item.text
                }, {
                    success: function(pushResponse) {
                        console.log("Sent push:", pushResponse);
                    }
                });
            });
        }
    });
}


}

    This insert script sends a push notification (with the text of the inserted item) to all channels stored in the Channel table.

Test the app

  1. In Visual Studio, press the F5 key to run the app.

  2. In the app, type text in Insert a TodoItem, and then click Save.

    Note that after the insert completes, the app still receives a push notification from WNS.

  3. (Optional) Run the app on two machines at the same time, and repeat the previous step.

    The notification is sent to all running app instances.

Next steps

This concludes the tutorials that demonstrate the basics of working with push notifications. Consider finding out more about the following Mobile Services topics:

Rss Newsletter