Windows Phone 8 : Using Push Notifications (part 5) - Creating Live Tiles

Sending a Live Tile notification is similar to sending a raw notification, but first you must bind your channel to the shell via the BindToShellTime (after first checking to ensure that the channel hasn’t already been bound):

// Bind to the Shell Tile
if (!_myChannel.IsShellTileBound)
{
  _myChannel.BindToShellTile();
}

Binding it to the shell in this way tells the phone to expect Live Tile notifications. Over on the server side, the code is similar to raw push notifications, but a couple of small changes need to occur. The body of the Live Tile update must be in the format of a specific XML document:

<?xml version=""1.0"" encoding=""utf-8""?>
<wp:Notification xmlns:wp=""WPNotification"">
  <wp:Tile>
    <wp:BackgroundImage>URL</wp:BackgroundImage>
    <wp:Count>0</wp:Count>
    <wp:Title>Title</wp:Title>
    <wp:BackBackgroundImage>URL</wp:BackBackgroundImage>
    <wp:BackTitle>Title</wp:BackTitle>
    <wp:BackContent>Content</wp:BackContent>
  </wp:Tile>
</wp:Notification>

The format of this file is similar to the different tile types indicated in WMApplication.xml file. The .xml file represents the data for the specific type of tile.

After you create this XML document, you are ready to push the change to the phone. So when you push this update from the server, you need to make a couple of small changes from the raw push notifications:

string SendTileMessage(string pushUri, string imageUrl)
{
  HttpWebRequest request =
    (HttpWebRequest)WebRequest.Create(pushUri);

  // For Raw Update use type of body
  // (text/plain or text/xml are typical)
  request.ContentType = "text/xml";

  // Specify the HTTP verb (must be POST)
  request.Method = "POST";

  // Use a generated unique ID to prevent duplicate push messages
  request.Headers.Add("X-MessageID", Guid.NewGuid().ToString());

  // Send Tile Immediate requires class == 1
  request.Headers.Add("X-NotificationClass", "1");

  // Specify that the message is a Toast message
  request.Headers.Add("X-WindowsPhone-Target", "token");

  // Create the XML of the Tile Message
  string tileMessage = @"<?xml version=""1.0"" encoding=""utf-8""?>
  <wp:Notification xmlns:wp=""WPNotification"">
    <wp:Tile>
      <wp:BackgroundImage>{0}</wp:BackgroundImage>
      <wp:Count>0</wp:Count>
      <wp:Title>Fun With Push</wp:Title>
      <wp:BackTitle>Back of Tile</wp:BackTitle>
      <wp:BackContent>More Content</wp:BackContent>
    </wp:Tile>
  </wp:Notification>";

  string tileXml = string.Format(tileMessage, imageUrl);

  // Send it
  byte[] notificationMessage = Encoding.UTF8.GetBytes(tileXml);
  request.ContentLength = notificationMessage.Length;
  using (Stream requestStream = request.GetRequestStream())
  {
    requestStream.Write(notificationMessage,
                        0,
                        notificationMessage.Length);
  }

  // Sends the notification and gets the response.
  try
  {
    HttpWebResponse response =
      (HttpWebResponse)request.GetResponse();

    return HandleResponse(response);
  }
  catch (Exception ex)
  {
    return string.Concat("Exception during sending message",
                         ex.Message);
  }
}

The first change is to ensure that the ContentType is set to text/xml because the body will be the XML document you’re going to create. Next the X-NotificationClass header needs to be set to 1 for tile updates. Like the raw and toast notifications, you can delay the delivery of the notification by adding 10 or 20, making the valid X-NotificationClass values 1, 11, and 21 for Live Tile updates. Next, you need to add a new header for the X-WindowsPhone-Target header and specify its value as token to tell the MPNS that this is a tile update. Lastly, you simply need to format the XML message as described earlier. Pushing this to the phone will enable you to update the tile on the phone (if it’s pinned to the home screen).

It’s a common practice to send an Internet-accessible URI for the BackgroundImage value. The image must be exactly 173×173 pixels in size and be a 24-bit .png file.

If you need to update a secondary tile, you must include a property of the tile called Id that has the URI used for the secondary tile:

  // Create the XML of the Tile Message
  string tileMessage = @"<?xml version=""1.0"" encoding=""utf-8""?>
  <wp:Notification xmlns:wp=""WPNotification"">
    <wp:Tile Id="/views/AnotherView.xaml?flightNo=465">
      <wp:BackgroundImage>{0}</wp:BackgroundImage>
      <wp:Count>0</wp:Count>
      <wp:Title>Fun With Push</wp:Title>
      <wp:BackTitle>Back of Tile</wp:BackTitle>
      <wp:BackContent>More Content</wp:BackContent>
    </wp:Tile>
  </wp:Notification>";

This Id attribute must match the URI of the secondary tile exactly; otherwise, it will not update the tile and just ignore the request.