Push Notification in Mobile Service

The Windows Azure mobile service provides features to send a push notification. The Mobile service provides a mechanism to communicate with the Windows Notification Service (WNS).

Click here to get the basics of WNS without using the Windows Azure Mobile Service.

This article assumes you are already familiar with Windows 8 Metro style applications and are also familiar with the package.appxmanifest file (if you are not familiar with the package.appxmanifest file then Click here to learn how to add push notification settings in a package.appxmanifest file)

There are five main steps we need to follow to send a Notification by using a mobile service:

1. Register your application on the live dashboard for push notification and configure the Windoes 8 app
2. Configure the Mobile service with a Client Secret and Package SID
3. Add push notification to the application
4. Write a script to send the push notification
5. Do a CRUD operation in the app, to receive notification

Let us see how to do all that one by one.

1. Register your application on the live dashboard for push notification and configure the Windoes 8 app
   
   Click here to learn how to register a Windoes 8 app on the live dashboard. This article helps you to register your Windows 8 application. Once your application gets registered on the live dashboard you can get a Package name, Client Secret and Package SID. See the following image:
   
   
   
   If you get all three keys shown above then it means your Windows 8 application was registered on the live dashboard. Now it's time to configure your Windows 8 application. Use the following steps to configure your Windows 8 application.
   
   Step 1 : Copy the Package name from the live dashboard.
   
   Step 2 : Create a new Metro style project in VS and open the Package.appxmanifest file from the new project.
   
   
   
   Step 3 : Click on the Packaging tab and paste the package name (which you copied from the live dashboard in first step); see:
   
   
   
   Step 4 : Change your publisher
   
   The Publisher name must be the same as the publisher name in the live dashboard (you gave your publisher name when you registered your Windows 8 application). See the following image:
   
   
   
   Step 5 : Set "Yes" in the toast capable setting. See the following image:
   
   
   
   [Remember]: to send a Toast, you need to set "Yes" in the Toast capable combo box.
    
2. Configure Mobile service with Client Secret and Package SID
   
   Use the following steps to configure the mobile service.
   
   Step 1 : Copy the Client Secret key and package SID from the live dashboard (Client Secret and package SID key are generated by the live dashboard once we registered our Windows 8 application on it).
   
   Step 2 : Open the Windows Azure Portal and click on the mobile service. See the following image:
   
   
   
   Go in the mobile service by clicking on it and click on the Push tab from the Windows Azure portal. The Push tab will ask you to enter your client secret key and Package SID key. See the following image:
   
   
   
   Once you have entered your client secret key and package key, press the save button to save all your changes.
    
3. Add push notification to the application
   
   In this step we need to use the PushNotification class and generate a channel URI for sending a Toast, Tile and Badge. Use the following steps to generate a new channel URI.
   
   Step 1 : Add the following namespace to your page:
   
   using Windows.Networking.PushNotifications;
   
   Step 2 : Copy the following code and paste it somewhere in your project:
   
   private async Task<string> GetChannelURI()
   {
       //Using Windows.Networking.PushNotifications
       PushNotificationChannel channel =null;
       try
       {
           channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
           return channel.Uri;
       }
       catch (Exception ex)
       {
           return "";
       }
   }

   The GetChannelURI() function is just used to generate a new channel URI.
    

4. Write a script to send push notification
   
   This step is very important in this article. As we know, the Mobile service provides the facility to write a script and execute it on the server side. So here we write a script for sending a push notification message on the client application. Use the following steps to write the Push notification script in the mobile service.
   
   Step 1 : Move to the mobile service application and open the data tab and create a table for insert, update and delete operations.
   If you are using my project (which was attached with this article) then you need to create a "notificationtest" table
   
   Step 2 : Click on the new table and move to the script tab and select insert script.
   
   
   
   Step 3 : Copy the following script and paste it into the insert script.
   
   Insert script
   
   //Insert script
   function SendNotifications()
   {
       //Send toast
       push.wns.sendToastImageAndText04("{Enter your Channel URI}",
       {
           image1src: "{Enter your image location}",
           image1alt: 'My pic',
           text1: "A record inserted",
           text2: "from " +"{Enter Your name}",
           text3: ""
       },
       {
           success: function (results) { console.log("Send successfully!"); },
           error: function () { console.log("Sending failed!"); }
       });
   }
   function insert(item, user, request)
   {
       request.execute({
       success: function () {
       request.respond();
       SendNotifications();
   },
   error: function ()
   {
       request.respond(500, "Error");
   }
   });
   } 

Do not forget to change the following three places after you paste the above script in the insert section:

1. {Enter your Channel URI} : replace your Channel URI (which you can generate by the GetChannelURI() function)
2. {Enter your image location} : replace your image URL
3. {Enter Your name} : Enter name 
   

Get more details about the Script in: http://msdn.microsoft.com/en-US/library/windowsazure/jj554226
[Remember]: If you are using my project (which was attached with this article) then you can find all the scripts under the script folder inside the application.

5. Do CRUD operation in the app, to receive the notification.

In this step we just need to insert data into the table (which was already created by us in the mobile service). Use the following steps to insert data in the mobile service.

Step 1: Create a class with the same structure of your table in the mobile service. The following is my class structure:

public class NotificationTest
{
    public int id { get; set; }
    public string Name { get; set; }
    public string ChannelURL { get; set; }
    public string ImageURL { get; set; }
}

The following is my table structure in the mobile service:


I will describe it in a simple way. Whatever property you created in the class, all these properties became a column name in the table. There is one feature named dynamic schema: Automatically generate a column name.

Step 2 : declare and initialize an object of the mobile service.

MobileServiceClient client = new MobileServiceClient("{Application URL}", "{Application Key}");

Browse the quick startup page for the application URL and Key from the Windows Azure mobile service.

Step 3 : Write code to insert a record, as in the following:

await client.GetTable<NotificationTest>().InsertAsync
(new NotificationTest { Name = "Naren Chejara", ChannelURL = "{Enter your channel URL}", ImageURL = "{enter you image location" });

Step 4 : Run your application and click on the insert button.



Reference

https://www.windowsazure.com/en-us/develop/mobile/tutorials/push-notifications-to-users-dotnet/
http://msdn.microsoft.com/en-US/library/windowsazure/jj554226