Get started with push notifications in Mobile Services

This topic shows you how to use Windows Azure Mobile Services to send push notifications to a Windows Store app. In this tutorial you add push notifications using the Windows Push Notification service (WNS) to the quickstart project. When complete, your mobile service will send a push notification each time a record is inserted.

This tutorial walks you through these basic steps to enable push notifications:

1. Register your app for push notifications and configure Mobile Services
2. Add push notifications to the app
3. Update scripts to send push notifications
4. Insert data to receive notifications

This tutorial requires the following:

• Microsoft Visual Studio 2012 Express for Windows 8 RC, or a later version

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

Register your appRegister your app for the Windows Store

To be able to send push notifications to Windows Store apps from Mobile Services, you must submit your app to the Windows Store. You must then configure your mobile service to integrate with WNS.

1. If you have not already registered your app, navigate to the Submit an app page at the Dev Center for Windows Store apps, log on with your Microsoft account, and then click App name.

   

2. Type a name for your app in App name, click Reserve app name, and then click Save.

   

   This creates a new Windows Store registration for your app.

3. In Visual Studio 2012 Express for Windows 8, open the project that you created when you completed the tutorial Get started with Mobile Services.

4. In solution explorer, right-click the project, click Store, and then click Associate App with the Store....

   

   This displays the Associate Your App with the Windows Store Wizard.

5. In the wizard, click Sign in and then login with your Microsoft account.

6. Select the app that you registered in step 2, click Next, and then click Associate.

   

   This adds the required Windows Store registration information to the application manifest.

7. Back in the Windows Dev Center page for your new app, click Advanced features.

   

8. In the Advanced Features page, click Push notifications and Live Connect services info, then click Authenticating your service.

   

9. Make a note of the values of Client secret and Package security identifier (SID).

   

   Security Note

   The client secret and package SID are important security credentials. Do not share these secrets with anyone or distribute them with your app.

10. Log on to the Windows Azure Management Portal, click Mobile Services, and then click your app.

    

11. Click the Push tab, enter the Client secret and Package SID values obtained from WNS in Step 4, and then click Save.

    

Both your mobile service and your app are now configured to work with WNS.

Add push notificationsAdd push notifications to your app

1. Open the file default.js and insert the following code fragment into the app.OnActivated method overload, just after the args.setPromise method:

   // Get the channel for the application.
   var channel;
   var channelOperation = Windows.Networking.PushNotifications
       .PushNotificationChannelManager
       .createPushNotificationChannelForApplicationAsync()
       .then(function (newChannel) {
           channel = newChannel;
       });

   This code acquires and stores a push notification channel each time the application is launched.

2. Replace the click event listener definition for buttonSave with the following code:

   buttonSave.addEventListener("click", function () {
           insertTodoItem({
               text: textInput.value,
               complete: false,
               channel: channel.uri
           });
       });

   This sets the client's current channel value on the item before it is sent to the mobile service.

   Note

   When dynamic schema is enabled on your mobile service, a new 'channel' column is automatically added to the TodoItem table when a new item that contains this property is inserted.

3. (Optional) If you are not using the Management Portal-generated quickstart project, open the Package.appxmanifest file and make sure that in the Application UI tab, Toast capable is set to Yes.

   

   This makes sure that your app can raise toast notifications. These notifications are already enabled in the downloaded quickstart project.

Update the insert scriptUpdate the registered insert script in the Management Portal

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

   

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

   

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

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

   function insert(item, user, request) {
       request.execute({
           success: function() {
               // Write to the response and then send the notification in the background
               request.respond();
               push.wns.sendToastText04(item.channel, {
                   text1: item.text
               }, {
                   success: function(pushResponse) {
                       console.log("Sent push:", pushResponse);
                   }
               });
           }
       });
   }

   This registers a new insert script, which sends a push notification (the inserted text) to the channel provided in the insert request.

Test the appTest push notifications in your 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 receives a push notification from WNS.

   

Next steps

In this simple example a user receives a push notification with the data that was just inserted. The channel used by WNS is supplied to the mobile service by the client in the request. In the next tutorial, Push notifications to app users, you will create a separate Channel table in which to store channel URIs and send a push notification out to all stored channels when an insert occurs.