代码改变世界

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

2010-11-16 19:19 by Cat Chen, ... 阅读, ... 评论, 收藏, 编辑

Windows 7 任务栏有何不同

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

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

Taskbar

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

Live Messenger Jump List

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

Live Messenger Thumbnail

此外,当你把鼠标悬停在 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 的新特性充分利用起来,为你的站点用户带来更好的体验。如果关注接下来的实战部分,欢迎订阅本博客