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

本网站已正式支持Windows 8.1 / IE 11的动态磁贴功能

在Windows 8中微软将Windows Phone平台的动态磁贴(Live Tiles)功能移植到桌面/平板电脑平台,开发者在开发Windows Store应用的时候可以选择性地开发动态磁贴功能。动态磁贴功能可以让用户在不打开应用的情况下看到应用的内容,一定程度上取代了在其他移动平台上风行的“通知中心”功能。

在Windows 8.1中,这个功能被带到了网页上。现在,网页开发者也可以为自己的网站添加动态磁贴的功能,当网站有更新的时候,所用已经订阅动态磁贴的用户都将看到更新,并且实现方法非常简单。注意,由于Windows 8自身缺陷,并不支持网站的动态磁贴功能,该功能只能在Windows 8.1上实现。

在开始之前,你需要做些准备:

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源地址,该网站会通过自有服务器为动态磁贴提供动态通知服务。向导的最后会生成一段代码,将这段代码加入到你网站的<head></head>标签之间就可以了。

仔细观察这段代码,其实就是由很多行<meta>组成的。<meta>标签主要用于定义网页的一些元数据,比较典型的有favicon,iOS SpringBoard图标等。最后的一大段则是动态磁贴通知功能的代码,网站的动态磁贴样式由 Build My Pinned Site 网站自动生成。此方法极其简单易行,但是个人认为它提供的样式极其难看,所以请继续看方法二。

二,自己定制

动态磁贴分为两个部分:静态磁贴(Tile),和通知(Notification)。静态磁贴的部分需要用<meta>元数据定义,定义方式如下:

<meta name="application-name" content="Septillion's Blog"/>
<!-- 在磁贴上显示的名称 -->

<meta name="msapplication-TileColor" content="#000000"/>
<!-- 磁贴背景的颜色代码 -->

<meta name="msapplication-square70x70logo" content="tiny.png"/>
<!-- 小磁贴的图片url -->

<meta name="msapplication-square150x150logo" content="square.png"/>
<!-- 中磁贴的图片url -->

<meta name="msapplication-wide310x150logo" content="wide.png"/>
<!-- 宽磁贴的图片url -->

<meta name="msapplication-square310x310logo" content="large.png"/>
<!-- 大磁贴的图片url -->

因为磁贴的背景是由<meta>定义的,所以请不要直接把背景颜色画到四种尺寸的磁贴PNG中,那样会大幅增加PNG的体积。最好的做法是让PNG背景透明,然后用<meta>定义。定义颜色之后,磁贴上的文字颜色会由Windows自动计算。将上述代码添加到<head></head>标签之间,你的网站就已经拥有一个静态磁贴了。如果你在之后修改了动态磁贴的样式(颜色、Logo等等),它会在下一次用户通过动态磁贴打开你的网站时自动更新样式。

但是这样只是实现了一个静态的磁贴,相当于只是有一个入口。我们需要让磁贴“活”起来,就需要让静态磁贴变成动态磁贴,实现“通知”的功能。通知可以使用三种方式定义:<meta>元数据,JavaScript和XML。

<meta>元数据:

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

其中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:

<?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>

最后将上述XML以<meta>的方式加载:

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

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

定义磁贴样式

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

MSDN参考链接:

固定网站增强功能

Pinned Site Metadata Reference (Internet Explorer)

磁贴模板目录

发布者

Frank Septillion

I would always try to find instead of ask.

发表评论

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