如何让你的网站支持 IE9 Pinned Site (Part 2 - 实战)

该如何展示 IE9 Pinned Site 呢？我可以写一个新的应用，完全是为了展示 Pinned Site 的特性，但这样就像是为了实现这些特性而利用这些特性。所以我想还是升级一个现有的网站好了，这样更能说明 Pinned Site 是如何起到优化用户体验的作用的。

我选择了 hack 现在的百度地图。由于 IE9 正式版还没有发布，所以我 hack 的代码暂时也不能发布到线上，只能私下玩玩。在这里，我选择使用 Fiddler 来替换百度地图首页代码，从而实现 hack 的效果。

添加静态信息

添加静态信息是最容易的，只要写几个 meta 标签就可以了。那么我们就把百度地图的相关信息填充上去吧。“任务”里面放什么链接呢？考虑到用户使用地图，通常就是搜索几类信息：地点、公交、驾车、周边，我们就把这几类搜索的快速入口链接放上去吧。不过，由于百度地图本身没有实现这几个快速入口的地址，所以我们需要在 JavaScript 里面实现一些小 trick 。

<meta name="application-name"
      content="百度地图" />
<meta name="msapplication-tooltip"
      content="使用百度地图浏览地图、搜索地点、查询公交驾车线路" />
<meta name="msapplication-window"
      content="width=1024;height=768" />
<meta name="msapplication-task"
      content='name=搜索;
               action-uri=./#json={"type":"poi"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=公交;
               action-uri=./#json={"type":"bus"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=驾车;
               action-uri=./#json={"type":"drive"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-task"
      content='name=附近;
               action-uri=./#json={"type":"circle"};
               icon-uri=/favicon.ico' />
<meta name="msapplication-navbutton-color"
      content="#2319DC" />
<meta name="msapplication-starturl"
      content="./" />


我选择的 trick 时，在百度地图首页地址后面加上一个锚点，锚点内含一个 JSON ，用里面的信息表明使用哪个分类搜索。在文章的后面会说明如何用利用 JavaScript 识别 JSON 然后做相应的处理，在这里我就不做解释了。

加入了上述信息后，当我们把百度地图固定到任务栏上，就能看到对应的图标和 Jump List 。

添加动态信息

接下来我们要添加动态信息。百度地图适合添加什么样的动态信息呢？考虑到用户可能经常需要搜索相同或相似的路线，我们可以把用户的搜索记录保存下来，并放到 Jump List 的一个名为“历史记录”的分类里面。

要实现这样一个分类，首先要记录用户点击“百度一下”进行搜索时文本框内的信息，然后再把这些信息写到 Jump List 里面去。先看看如何捕获用户点击“百度一下”按钮的事件吧。

$('#form1').submit(function () {
  var historyItem = {
    'type': 'poi',
    'word': $('#PoiSearch').val()
  };
  addHistoryItem(historyItem);
  updateJumpList();
});

我们监听表单的提交事件，然后把搜索类型和文本框内的信息保存到一个 JSON 里，然后把 JSON 存到 localStorage ，最后更新 Jump List 。如何把 JSON 保存到 localStorage ，以及在将来从 localStorage 中取回 JSON ，这些都不属于本文的话题，大家可以看看资源下载一节的源代码，这里就不展开讨论了。我们关注的是如何将 JSON 中的数据添加到 Jump List 中去。

var updateJumpList = function () {
  var history = loadHistory();

  try { /* try is for IE9 beta only and RTM will change */
    if (window.external.msIsSiteMode()) {
      window.external.msSiteModeClearJumpList();
      if (history.length > 0) {
        window.external.msSiteModeCreateJumpList('历史记录');
      }
      for (var i = 0; i < history.length; i++) {
        var historyItem = history[i];
        switch (historyItem.type) {
          case 'poi':
            window.external.msSiteModeAddJumpListItem(
              '搜索' + historyItem.word,
              'http://map.baidu.com/#json=' +
                JSON.stringify(historyItem),
              'http://map.baidu.com/favicon.ico');
            break;
        }
      }
      window.external.msSiteModeShowJumpList();
    } else {
      /* it’s not in side mode */
    }
  } catch (e) { console.dir(e); }
};

我们把历史记录读取出来，然后检查现在是否在 IE9 中，再检查现在是否在 Site Mode 中（也就是用户已经把站点固定到任务栏了）。由于 IE9 Beta 的缺陷，无法通过特性检查来得知浏览器是否支持 Site Mode ，所以需要使用 try catch 模式，这将在正式版中修复。

接下来，我们遍历历史记录，根据类型信息组合 Jump List 项目的文本信息和地址，然后把项目添加到 Jump List 上。地址的做法同样是使用锚点加 JSON ，到底这个 JSON 在页面打开时是如何解释的，请大家看资源下载一节的源代码吧，我就不浪费篇幅解释了。

这就是完成后 Jump List 的样子。

资源

代码

完整代码示例下载

视频

这是我在北京 PDC Party 做的演讲，里面的内容与文章的内容相当，大家把这当作补充材料。当天去参加了活动的人，也可以在我文章中直接获取到代码。

Youku 高清
Youtube 高清

小结

希望通过这两篇文章让大家了解到，要实现 IE9 Pinned Site 其实并不难，但它可以帮助你提升网站的用户体验，让用户更方便快捷地使用你的网站功能。接下来，我会分享更多关于 IE9 和 HTML5 的内容，欢迎订阅本博客。