Push Notifications for Tiles with Windows Phone 7

As I couldn’t find a complete sample showing the use of push notifications for start screen tiles, I’ve decided to spend a few minutes creating one. These few minutes quickly grew into hours and I’m now on day two on my quest to provide this sample.

But let’s start slowly … at the beginning, I just wanted to get the regular toast notifications running. On the web were a number of mentions and samples (based on the previous CTP however) so that I was convinced that it couldn’t be too hard.

There are a few things I’ve learned in the meantime. First and foremost, if you open an HttpNotificationChannel on your phone and get a NotificationChannelOpenException as the only answer (for code which worked with the previous version of the SDK), you have to set the Publisher attribute in your WMAppManifest.xml to something other than the default empty string. This is detailed in the release notes, but it took me quite a while and a forum post to find this out. This has been introduced with the latest CTP.

After setting up the required HttpNotificationChannel, transferring the URL to my server-side application (which will later trigger the response), I was ready to go. I sent the toast using pretty much the standard boilerplate code. My phone was indeed contacted and I would immediately receive a NotificationChannelUnexpectedException. The usual cause for this would be an incorrect namespace or XML element name for <wp:Notification /> as this has been changed since the CTP. But in my case, both seemed to be ok. But it wasn’t … I forgot the X-NotificationClass header. After adding this, I could now send and receive  notifications (toast notifications for now, full code in the attached sample ZIP at the bottom of this post):

1. HttpWebRequest req = (HttpWebRequest) WebRequest.Create(notificationUrl);
2. req.Method = "POST";
3. req.ContentType = "text/xml";
4.             
5. req.Headers = new WebHeaderCollection();
6. req.Headers.Add("X-NotificationClass", "2");
7.  
8. string msg = "Content-Type: text/xml\r\nX-WindowsPhone-Target: toast\r\n\r\n" +
9.     "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
10.     "<wp:Notification xmlns:wp=\"WPNotification\">" +
11.             "<wp:Toast>" +
12.                 "<wp:Text1>" + text1 + "</wp:Text1>" +
13.                 "<wp:Text2>" + text2 + "</wp:Text2>" +
14.             "</wp:Toast>" +
15.     "</wp:Notification>";
16.  
17. byte[] strBytes = new UTF8Encoding().GetBytes(msg);
18. using (Stream requestStream = req.GetRequestStream())
19. {
20.     requestStream.Write(strBytes, 0, strBytes.Length);
21. }
22.  
23. try
24. {
25.     HttpWebResponse response = (HttpWebResponse) req.GetResponse();
26.     string notifiationStatus = response.Headers["X-NotificationStatus"];
27.     string subscriptionStatus = response.Headers["X-SubscriptionStatus"];
28.     string connectionStatus = response.Headers["X-DeviceConnectionStatus"];
29.  
30.     return (int) response.StatusCode;
31. }
32. catch (WebException ex)
33. {
34.     return (int) ((HttpWebResponse) ex.Response).StatusCode;
35. }

Hooray! On to the tile notification.

Even though the system itself can display vectorized tiles (and does so in the “People” tile for example), application-based tile notifications can only change three things: the title, the “unread item” counter (top right) and the local/remote URL for the background image. (Otherwise your tile would have to run custom code to provide a vector rendering … something which seems undesirable at the current time.) If you want to provide any dynamic images, this means that you have to process the image on the server side. It also means that – in reality – you will also somehow have to let the server know which color scheme and highlight color the user has chosen so that you can render an adequate image. But I’ll leave this for later.

As a first step, I just wanted to change title/counter for the tile without changing the background image. (I’ve actually tried also changing the background image but keep receiving an exception when doing so. I’ll update this as soon as I find the reason …). To do this, I’ve just changed a few lines in the sending code:

1. req.Headers.Add("X-NotificationClass", "1");
2.  
3. string msg = "Content-Type: text/xml\r\nX-WindowsPhone-Target: token\r\n\r\n" +
4. "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
5. "<wp:Notification xmlns:wp=\"WPNotification\">" +
6.      "<wp:Token>";
7.         if (imageUrl != null && imageUrl.Length > 0)
8.         {
9.             msg += "<wp:Img>" + imageUrl + "</wp:Img>";
10.         }
11.         msg += "<wp:Count>" + count + "</wp:Count>" +
12.             "<wp:Title>" + title + "</wp:Title>" +
13.      "</wp:Token>" +
14. "</wp:Notification>";

As soon as this code is run on the server side (with the use of a small WPF app to enter the data) the tile will reflect the changes. (To show the tile, you have to long-click the application in the list and choose “pin to start”):

Initial view of the tile:

The next step is to start the application and click on “open notification channel”. After this, you can use the demo client to send a notification:

Which will be shown in the emulator within just about two seconds:

 

Ok. Next step for me is to try to figure out how to display the dynamically generated images.

In the meantime, you can download and play with the sample: 

TileNotifications_V01.zip (192KB)

(You will need to do a global search and replace of “192.168.2.163” to your local machine’s IP address which can be used to communicate from the emulator to your computer. In addition, the project NotificationSender needs to be put into a IIS virtual directory which can be reached via this IP address.)