Windows Phone 7 Development : Push Notifications - Implementing Tile Notifications

Tile notifications can update the images and texts of application tiles. Tile notifications are ideal for applications that convey small amounts of information, especially when that information changes frequently. For example, weather reports and compass headings are both good candidates for this category.

You will implement the tile notifications application in the same three steps you followed to implement toast notifications, namely the following:

1. Create a Windows Phone 7 Notification client application. This application will establish a notification channel.

2. Create and execute the Windows Forms client. You will take the URI of the notification channel that you established in Step 1, paste it into the "Push Notifications URL" text box, and submit push notification to the application.

3. Verify that you are able to receive tile notifications in the Windows Phone 7 application.

1. Creating a Client Application

You will take the PNClient application that you have created and enhance it to accept tile notifications in addition to toast notifications. You will not recreate the application; rather, you will concentrate on the changes needed to enable tile notifications.

1. Launch Visual Studio 2010 Express for Windows Phone and open the PNClient project.

2. Locate the BindToShell function inside the MainPage.xaml.cs file. Change that function to look like the one here (essentially, you are adding a line to bind this application to tile notifications):

   private static void BindToShell(HttpNotificationChannel httpChannel)
           {
               try
               {
                   //toast notification binding
                   httpChannel.BindToShellToast();
                   //tile notification binding
                   httpChannel.BindToShellTile();
               }
               catch (Exception)
               {
   
               }
           }

   
   

Those are all the changes you need to make to the PNClient application to enable tile notifications.

2. Creating an Application to Send Notifications

There are a few changes that you need to make to code that sends push notifications to enable tile notifications processing. First, you'll need to use a different XML schema for tile notifications, as shown here:

<?xml version=\"1.0\" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification">
 <wp:Tile>
  <wp:BackgroundImage><URI to Image></wp:BackgroundImage>
  <wp:Count><Count Message></wp:Count>
  <wp:Title><Title Message></wp:Title>
 </wp:Tile>
</wp:Notification>

The <URI to Image>element specifiesthe location, which is either local or remote, of the background image used to update the application tile. <Count Message>is the counter text (the one almost at the center of the tile) to set on the tile and the <Title Message>is the message text to set at the bottom of the application tile.

NOTE

In the current implementation of Push Notifications for Windows Phone 7, to set the background image to an image located on the Internet, you must specify the location of that image when creating a Windows Phone 7 Notification client application. While this is certainly not very flexible (you would have to know beforehand all of the images that you will be using to update tiles with), Microsoft generally does not encourage the use of remote images for tile updates, limiting the maximum allowed size of those images to 80KB and emphasizing in documentation that the use of remote resources leads to excessive battery drain.

Follow these steps to make changes for tile notifications:

1. Open the PNServer project and open code for the Form1.cs file (right-click Form1.cs in Solution Explorer and select View Code).

2. Now, you will define the XML schema information inside the code. Paste the following string declaration to the top of the file, right underneath the string ToastPushXML declaration:

   string TilePushXML = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
           "<wp:Notification xmlns:wp=\"WPNotification\">" +
           "<wp:Tile>" +
           "<wp:Count>{0}</wp:Count>" +
           "<wp:Title>{1}</wp:Title>" +
            "</wp:Tile>" +
            "</wp:Notification>";

   
   

3. Inside the btnSendNotification_Click event handler, change the following two lines of code:

   sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "toast");
   sendNotificationRequest.Headers.Add("X-NotificationClass", "2");

   
   

   to

   sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "token");
   sendNotificationRequest.Headers.Add("X-NotificationClass", "1"); //- tiles

   
   

4. Finally, you need to change the string that gets sent to the Windows Phone 7 application. To accomplish that, change the following line of code inside the btnSendNotification_Click event handler from:

   string str = string.Format(ToastPushXML, txtTitle.Text, txtText.Text);

   
   

   to:

   string str = string.Format(TilePushXML, txtTitle.Text, txtText.Text);

   
   

Those are all of the changes that you need to make to enable tile notifications on the Windows Phone 7 device. You are now ready to test tile notifications on the Windows Phone 7 emulator.

2.1. Verifying Delivery of Push Notifications

Having made changes to both the client and the server portions of the code to enable tile notifications, it's time to take them for a spin.

Just as with toast notifications, you need to obtain the URI of the notification channel.

1. Open PNClient project, make sure that you have a connection to the Internet, and press F5 to run the project.

2. Click the Create Channel button and, after seeing the URI printed on the screen, copy it to the clipboard from the Output window.

Remember that tile notifications appear on the phone only when a Windows Phone 7 application associated with these notifications is not running in the foreground on the phone and (this is important!) only when the application tile is available on the Windows Phone 7 Start screen.

3. To pin the application tile onto the Start screen, with the PNClient application running, click the phone's Windows button, and then click the arrow (=>) to open the Windows Phone 7 Options screen, shown in Figure 17-8.

4. Click and hold the left mouse button down (also referred to as "long click") to bring up the pop-up menu shown in Figure 1.

5. Click the Pin to Start option.

Now, the PNClient application tile should be shown on the Start screen, together with the Internet Explorer tile.

6. Switch to the PNServer Windows Forms project, and press F5 to run it.

7. In the Push Notifications URL text box, paste the URI obtained in Step 1. In the Push Notifications Title and Push Notifications Text text boxes, enter text for the counter and tile message accordingly.

   Figure 1. To receive tile notifications, the application tile must be pinned to the Start screen.

   

Now you're ready to send and receive tile notifications.

8. Click the Push Notification button in the PNServer application.

You should now see the application tile updated from default to the one containing both the counter text ("2") and the message text ("MSFT +2").

As you can see, processing tile notifications is only slightly different from processing toast applications. Processing raw notifications is also very similar to the foregoing walkthroughs; however, since raw notifications are received when an application is running in the foreground only, you would need to wire up an event inside the Windows Phone 7 application to process messages received, as you will see shortly in the section about implementing raw notifications.