为网站添加Windows 8.1/IE11动态磁贴

在Windows 8中微软将Windows Phone平台的动态磁贴（Live Tiles）功能移植到桌面／平板电脑平台，开发者在开发Windows Store应用的时候可以选择性地开发动态磁贴功能。动态磁贴功能可以让用户在不打开应用的情况下看到应用的内容，一定程度上取代了在其他移动平台上风行的“通知中心”功能。 在Windows 8.1中，这个功能被带到了网页上。现在，网页开发者也可以为自己的网站添加动态磁贴的功能，当网站有更新的时候，所用已经订阅动态磁贴的用户都将看到更新，并且实现方法非常简单。注意，由于Windows 8自身缺陷，并不支持网站的动态磁贴功能，该功能只能在Windows 8.1和IE11浏览器上实现。 在开始之前，你需要做些准备： 1.你要有一个网站（废话）。你的网站需要一个Logo（废话） 2.为网站准备四种尺寸的动态磁贴图片，分别对应：小（70×70）、中（150×150）、宽（310×150）、大（310×310）。如果希望动态磁贴能在HDPI（Retina）屏幕上拥有更好显示效果，请将分辨率相应提高四倍。推荐格式为PNG，体积小于200KB，分辨率不大于1024×1024。 3.你的网站需要有favicon。不懂的请百度。 方法有二： 一，通过 Build My Pinned Site 网站实现 打开 Build My Pinned Site 网站，跟从网站向导。该网站会以非常简单的向导来引导开发者创建网站动态磁贴，只需要输入网站的RSS源地址，该网站会通过自有服务器为动态磁贴提供动态通知服务。向导的最后会生成一段代码，将这段代码加入到你网站的标签之间就可以了。 仔细观察这段代码，其实就是由很多行组成的。标签主要用于定义网页的一些元数据，比较典型的有favicon，iOS SpringBoard图标等。最后的一大段则是动态磁贴通知功能的代码，网站的动态磁贴样式由 Build My Pinned Site 网站自动生成。此方法极其简单易行，但是个人认为它提供的样式极其难看，所以请继续看方法二。 二，自己定制 动态磁贴分为两个部分：静态磁贴（Tile），和通知（Notification）。静态磁贴的部分需要用元数据定义，定义方式如下：

因为磁贴的背景是由定义的，所以请不要直接把背景颜色画到四种尺寸的磁贴PNG中，那样会大幅增加PNG的体积。最好的做法是让PNG背景透明，然后用定义。定义颜色之后，磁贴上的文字颜色会由Windows自动计算。将上述代码添加到标签之间，你的网站就已经拥有一个静态磁贴了。如果你在之后修改了动态磁贴的样式（颜色、Logo等等），它会在下一次用户通过动态磁贴打开你的网站时自动更新样式。 但是这样只是实现了一个静态的磁贴，相当于只是有一个入口。我们需要让磁贴“活”起来，就需要让静态磁贴变成动态磁贴，实现“通知”的功能。通知可以使用三种方式定义：元数据，JavaScript和XML。 元数据：

其中frequency的单位为分钟，是动态磁贴的刷新频率，有效值为：30、60、360（6小时）、720（12小时）、1440（一天）。若未定义，则默认为1440。polling-uri最多可以添加五个，指向磁贴布局文件，将随机显示，且仅支持http和https协议。 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：

  
    
      
      
      
      
      #009900
    
    
      
      
      
      30
      1
    
  

最后将上述XML以的方式加载：

三种实现方式的最终效果没有任何区别。

定义磁贴样式

最后要做的就是让以上代码加载定义磁贴样式的XML文件。Windows 8.1的动态磁贴依托于模板创建，请参阅磁贴模板目录。一个XML中可以定义三个尺寸的样式，只需要定义多个标签即可。 最终效果如下图所示。

MSDN参考链接：

固定网站增强功能 Pinned Site Metadata Reference (Internet Explorer) 磁贴模板目录 via：Septillion

标签:固定网站IE Web磁贴