如何让你的网站支持 IE9 Pinned Site (Part 1 - 理论)

Windows 7 任务栏有何不同

自从 Windows 95 开始，任务栏就一直没什么变化，都是一个个长条表示正在运行的应用程序，直到 Windows 7 。 Windows 7 的任务栏发生了巨大的变化，这个变化其实就是更像 Mac OS X 的 Dock 了。无论是否在运行的应用程序，都可以在任务栏上占一个位置，并且这个位置可以固定下来，让用户可以更方便的操作这个应用程序。从此，任务栏由单向地提供应用程序运行状态信息，变成了双向——用户也能随时随地地操作某一个应用程序。这就弱化了系统托盘的角色，过去要通过系统托盘做的各种交互，现在直接坐到任务栏上就可以了。

我们以最新版的 Windows Live Messenger 2011 来看看， Windows 7 的任务栏都能干什么：

我们可以看到，在 Windows Live Messenger 的图标上，叠加了一个绿色的小图标，表示用户当前在线。过往，这个信息只能显示系统托盘里，现在可以直接在任务栏上显示了。

右键点击 Windows Live Messenger 的图标，会出现 Windows 7 特有的 Jump List 。它跟过往上下文菜单的区别在于，开发者能够灵活定制里面的内容。例如说， Windows Live Messenger 就在此处显示“常用联系人”（我已经把我的联系人列表隐藏掉），同时显示若干“任务”。在过往的 Windows 版本中，开发者往往需要定制应用程序图标的上下文菜单，或者定制系统托盘图标的上下文菜单，来达到同样的效果。

此外，当你把鼠标悬停在 Windows Live Messenger 图标之上时，除了显示预览外，还会看到预览下方的几个快捷按钮。用户可以在不调出 Windows Live Messenger 的前提下更改在线状态。

Internet Explorer 9 如何用上新特性

不要以为上面所提到的交互方式，只有 Windows 本地应用程序能够使用。在 IE9 里面，通过简单的 meta 标签声明，也能定制网站的任务栏图标交互方式。当然这是有前提的，就是用户要把网站固定到任务栏上，也就是所谓的 Pinned Site 。

要让站点变成 Pinned Site 很简单，让用户按着本页的标签或者图标拖到任务栏上就可以了。然后站点就会从普通的浏览器窗口里面脱离出来，成为一个独立的浏览器窗口，并且有自己对应的任务栏图标。

这时候的任务栏图标跟普通的 IE9 没有什么区别，只是图标变成了站点的 favicon （假如有的话）。需要加上新功能的话，就需要额外加一些代码。

使用 meta 标签

首先，我们可以加入如下一组 meta 标签：

<meta name="application-name"
      content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip"
      content="Start the page in Site Mode"/>
<meta name="msapplication-starturl"
      content="http://example.com/start.html"/>
<meta name="msapplication-window"
      content="width=800;height=600"/>
<meta name="msapplication-navbutton-color"
      content="red"/>

他们制定了站点的名称、提示信息、启动地址、窗口大小、导航按钮颜色。

然后，我们可以再加上一组 meta 信息，使得 Jump List 出现“任务”一栏，用于显示用户常用的固定链接。

<meta name="msapplication-task"
      content="name=Task 1;
               action-uri=http://host/Page1.html;
               icon-uri=http://host/icon1.ico"/>
<meta name="msapplication-task"
      content="name=Task 2;
               action-uri=http://microsoft.com/Page2.html;
               icon-uri=http://host/icon2.ico"/>

这使得 Jump List 中出现两个任务，分别拥有对应的图标和描述文字，指向对应的地址。

添加 JavaScript

接下来我们可以添加一些动态内容。这些内容根据当前用户的登录状态，或者用户的浏览历史记录生成，因为无法使用固定的 meta 标签来声明，只能使用 JavaScript 来动态生成。

Jump List 除了固定有一个“任务”栏目外，我们还可以增加一个自定义栏目，里面放进若干个链接（具体数目由用户的 Windows 任务栏选项决定）。

window.external.msSiteModeCreateJumplist('List1');
window.external.msSiteModeAddJumpListItem(
  'Item 1',
  'http://host/Item1.html',
  'http://host/images/item1.ico');
window.external.msSiteModeShowJumplist();

在站点的 favicon 之上，可以叠加一个图标表示状态。可以好像 Live Messenger 那样表示在线状态，也可以用于表示有新消息。

window.external.msSiteModeSetIconOverlay(
  'http://host/images/overlay1.ico',
  'Overlay 1');

此外，缩略图下方的按钮也可以定制，最多放下 7 个按钮。在创建按钮时你能获取到一个 id ，类似 setTimeout 返回的 id ，你要将它保存下来以标识这个按钮。随后，无论是哪个按钮被点击都，都会触发同一个时间，你就需要上述 id 来判别到底是哪个按钮被点击了。

var botton1 =
  window.external.msSiteModeAddThumbBarButton(
    'http://host/images/button1.ico',
    'button 1');
document.addEventListener('msthumbnailclick', function(e) {
  if (e.buttonID == button1) {
  }
}, false);
window.external.msSiteModeShowThumbBar();

最后一个就是，你可以让任务栏图标闪烁以引起用户的注意。

window.external.msSiteModeActivate();

小结

加入上述简单代码，你就能够让自己的站点把 IE9 Pinned Site 的新特性充分利用起来，为你的站点用户带来更好的体验。如果关注接下来的实战部分，欢迎订阅本博客。