This website now contain full support of Windows 8.1 / Internet Explorer 11 Live Tiles.

Live Tiles feature was firstly introduced when Microsoft announced Windows Phone 7, and later this feature was brought to Windows desktop and tablet platform with Windows 8. When developers are developing Windows Store Apps, they can choose to add Live Tiles to their Apps, which bring immersive and active feeling to the whole system. With Live Tiles pinned to user’s Start Screen, new content is showed right on the tiles and the user won’t even have to open the App. This feature, in many ways, acts like the Notification Center in other mobile systems (i.e. iOS and Android).

After upgrading to Windows 8.1, web developers like me can add Live Tiles to their websites as well. When the website has new content, it will automatically appear on user’s screen if they’ve pinned your tile. And the progress of adding a Live Tile is extremely easy. Notice that this feature is only available on Windows 8.1.

To start with this progress, you have to:

  1. Have a website, as well as a Logo.
  2. Prepare tile picture of four sizes: Small (70X70), Medium (150×150), Wide (310×150), Large (310×310). If you want your tiles to have better view on High DPI (Retina) screens, increase the resolution four times. The recommended format is transparent PNG, and the image must be within 200KB, 1024×1024.

  3. Have a favicon. Google for How-To if you don’t have one.

Two methods are recommended in this post:

  1. Create Live Tile with Build My Pinned Site website

Open Build My Pinned Site, and follow the instructions. The instructions will guide you and create a Live Tile for your website in a extraordinarily easy way. You can simply type your RSS feed and it will automatically generate Live Tile codes for you. Finally add these codes between <head></head> tag of your source code and then they will work.

By observing these codes can we easily find that they consist of several <meta> tags. These are called metadata, and are usually used to declare some properties of your webpage. The last line (block) of code is automatically generated by Build My Pinned Site and is used to declare the look of your tiles.

As I’ve said before, it’s extraordinarily easy to create Live Tile for your website with this method, but the result–the final appearance of the Live Tile is under my satisfaction. So let’s jump to method 2.

  1. Customize your own Live Tile.

Live Tiles are divided into two functional parts: the Tile it self, and the notification (“Live” Tile) functionality. Tile is declared and defined by metadata, like this:

<meta name="application-name" content="Septillion's Blog"/>
<!-- Name of the tile -->

<meta name="msapplication-TileColor" content="#000000"/>
<!-- Background color code -->

<meta name="msapplication-square70x70logo" content="tiny.png"/>
<!-- url of small tile picture -->

<meta name="msapplication-square150x150logo" content="square.png"/>
<!-- url of medium tile picture -->

<meta name="msapplication-wide310x150logo" content="wide.png"/>
<!-- url of wide tile picture -->

<meta name="msapplication-square310x310logo" content="large.png"/>
<!-- url of large tile picture -->

It is because that the background color of the tile is defined by the metadata, you won’t wanna draw hard background right in the PNG file. This action will increase the size of your PNG file and slow down the loading progress. The best practice is to make the PNG file transparent and define the background in metadata. Color of text on the tile is automatically calculated by Windows and you don’t have to deal with it–actually, you can’t. Put the codes above between the <head></head> tags of your website and enjoy the static tile. If you changed the style of your tile later on, it will automatically change when next time user opens your website via your tile.

But After all these you just have a static tile. We have to make it “alive”, by turning the tile into a Live Tile, by adding the notification functionality. You can declare the notification in three method:

Metadata:

<meta name="msapplication-notification" content="frequency=30;
polling-uri=http://www.septillion.cc/tile1.xml;
polling-uri2=http://www.septillion.cc/tile2.xml; cycle=1"/>

The frequency is the update frequency of the Live Tile and is counted by “minute”. Available values are: 30, 60, 360 (6 hours), 720 (12 hours), 1440 (1 day). If not specified, the default value is 1440. You can add up to five polling-uri pointing to layout XML file of the tile. Only http and https protocol is supported.

JavaScript:

document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);

  function StartPeriodicUpdateBatch()
  {
      var arrURI = ["notifications/tile1.xml", "notifications/tile2.xml", "notifications/tile3.xml"];
      window.external.msEnableTileNotificationQueue(true);
      window.external.msStartPeriodicTileUpdateBatch(arrURI);

XML:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

Then load the XML using metadata:

<meta name="msapplication-config" content="IEconfig.xml" />

The final effects of the three methods are identical.

Define Tile Layout

Finally, what you have to do is to define the Tile Layout with XML file, therefore you can load them with the codes given. Windows 8.1 Live Tiles is created with templates. Please refer to The tile template catalog for more information. Notice that you can define all three sized of tiles in one XML file just by declare multiple <binding> tags.

MSDN Reference:

Pinned site enhancements

Pinned Site Metadata Reference (Internet Explorer)

The tile template catalog

Published by Frank Septillion

I would always try to find instead of ask.

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注