Windows 8 中的固定网站

IEBlog 简体中文

Windows Internet Explorer 工程团队博客

Windows 8 中的固定网站

  • Comments 0

Windows 8“开始”屏幕是您查找所有最喜爱的应用程序和内容并与它们保持连接的最佳位置。丰富多彩的活动应用程序图块可以向您展示最新的定制内容,从而您可以与时俱进,随时了解最新信息。

此前,我们撰写了有关 Windows 8 中 Internet Explorer 10 的 Metro 风格浏览体验的博文。该博文详细描述了 IE10 的固定网站及其在 Windows 8“开始”屏幕中的可用性,包括通知您最新内容的以网站为中心的视觉效果和徽章通知。我们还将说明支持固定网站的 Web 开发人员详细信息。

下面的视频显示了 Windows 8 Consumer Preview 中活动的固定网站。


Windows 8 中的固定网站

固定网站 – 不只是收藏夹

Windows 消费者通过会将大部分时间花费在 Web 上,通过 Windows 选择加入遥测(官方名称为 Microsoft 客户体验改善计划),我们了解到消费者通常会多次返到同一组网站。Windows 8 上的固定网站使您可以轻松快捷地到达您的站点。借助徽章通知,网站图块可以显示各种最新信息并帮助您了解现有的最新内容。

使用固定网站,开发人员可以将他们的网站与用户的联系变得更为紧密,并在 Windows“开始”屏幕中直接推广他们的网站品牌。我们发现就在 Windows 7 中使用 IE9 的该功能的网站而言,网站访问次数增加了 15% 到 50%。在 Windows 8 中,即使是在未使用浏览器打开网站的情况下,借助站点图块更新,您依然可以获得更加出色的消费者体验。

下面的两个截图演示了固定网站图块和徽章通知。

“开始”屏幕中显示以网站为中心的视觉效果和徽章通知的固定网站
“开始”屏幕中显示以网站为中心的视觉效果和徽章通知的固定网站

固定网站的图块上的徽章通知示例
固定网站的图块上的徽章通知示例

固定网站的图块上以网站为中心的视觉效果

作为 Web 开发人员,您可以在浏览器的地址栏、新页签和“开始”屏幕等位置提供一个表示网站的网站图标 (Favicon) 并将其用于 IE10。IE10 可以使用大的网站图标(32 x 32 像素)来识别网站(在站点图标固定到“开始”屏幕时),这与 IE9 将网站图标固定到任务栏非常类似。

使用 Metro 风格的 IE10 固定网站的屏幕截图,其中显示了网站图块的预览
使用 Metro 风格的 IE10 固定网站的屏幕截图,其中显示了网站图块的预览

IE10 从图标中提取主色并自动将其用作“开始”屏幕图块的背景颜色。

创建图标所使用的工具之一就是 X-Icon Editor。可以使用它来为您的网站创建 32x32 像素的图标。该工具还可以将图像转换为图标文件格式 (.ico)。然后,使用传统的 Favicon 标记来关联该 .ico 文件:

<link href="testdrive.ico" rel="shortcut icon" />

后台更新的徽章通知

Windows 8 可以轮询“开始”屏幕中固定图块的更新。这对于轻量级的通知,例如,来自其他用户(电子邮件和社交网站)的新消息、购物网站的最新折扣和新闻网站的最新报道等通知来说效果非常明显。

使用 Internet Explorer 10 和 Windows 8,您可以直接在您的固定网站图块上提供徽章通知。这意味着无需在浏览器中打开网站即可看到这些网站的更新内容。例如,在 Windows 8 Consumer Preview 中使用 IE10 来固定 Fresh Tweet 演示。固定网站的图块将定期更新并将在出现新的 Tweet 时通知用户。

背景通知需要网站提供的组件。这些组件包括:(1) 徽章通知 XML,描述 Windows 徽章通知的 XML 响应,以及 (2) 固定网站元标记,指向 Windows 轮询通知和轮询频率的位置的 Web 页面标记。

徽章通知 XML

Windows 处理徽章通知的轮询和提取。Windows 轮询描述固定网站图块视觉效果的徽章通知 XML。徽章 XML 架构定义这一简单的 XML 响应。例如,要使用“3”来更新图块,您需要发送以下 XML:

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

徽章可以是数字或字形(例如,“警报”和“新消息”指示器)。有关徽章可显示内容的全部列表,请参阅 MSDN 上的选择徽章图像

固定网站元标记

按下来是将徽���通知 XML 与 Web 页面相关联。IE10 使用元标记 “application-name”来确定是否 Web 页面支持固定网站功能,如通知和跳转列表。要支持徽章通知,请将新的元标记添加到包含徽章通知 XML 的 URL 和 Windows 请求频率的标记语言中。IE 将检查在固定时和从固定网站图块后续启动网站时页面中是否存在“msApplication-badge”元标记。

<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />

值参加由两部分组成:polling-uri(强制部分)和 frequency(可选部分)。

polling-uri 是 Windows 用来请求上述简单 XML 文档的绝对 URI。

frequency 是两次更新之间的可选分钟数,其必须为下列值之一:

  • 30(Windows 将每 30 分钟轮询一次 URI)
  • 60(Windows 将每 60 分钟轮询一次 URI)
  • 360(Windows 将每 6 小时轮询一次 URI)
  • 360(Windows 将每 12 小时轮询一次 URI)
  • 1440(Windows 将每天轮询一次 URL。该值为默认值。)

如果省略 frequency,或者它的值是不同于上述值的其他值,则默认设置为每天更新一次(1440 分钟)。

更新徽章通知的开发人员 API

您也可以从 Web 页面直接清除或刷新网站图块,以便确保网站图块的内容是最新的。

当用户通过“开始”屏幕启动固定网站时,Web 网站将在其自有的 SiteMode 会话中运行,并且可使用下列 JavaScript 函数更新徽章。

window.external.msSiteModeClearBadge() 可以清除图块上的徽章通知。在 Fresh Tweet 演示中,当用户收到通知并点击图块启动浏览器时,Web 页面将使用 msSiteModeClearBadge() 从图块上清除通知。这样,当下次图块上显示通知并亮起时,用户便可以意识到有了新内容。

window.external.msSiteModeRefreshBadge() 调用 Windows 来使用轮询 URI 更新网站徽章。例如,当用户看到固定网站图块显示存在三个未读消息并单击该图块返回网站时。如果他/她只阅读了第一个更新,则您可以触发更新以便徽章可以正确反映出已读/未读数量 2。

在 Windows 8 Consumer Preview 中,这两个 API 仅对在本地 Intranet 或受信任的站点区域中运行的网站有效。下一个预览版中将有效地解决该问题。要使用 Consumer Preview 在您的自有网站上测试这些 API,请使用 [Internet Properties](Internet 属性)对话框中的 [Security](安全)选项卡将该网站的域添加到受信任站点列表。

桌面任务栏通知

桌面任务栏中显示为图标叠加的固定网站通知将继续适用于桌面上的 Windows 8 和 IE10。Windows 8“开始”屏幕中的固定站点不存在这种通知。Windows 8 不仅可以处理“开始”屏幕中的所有图块的通知,而且可以节电模式来完成这些操作。

在网站中快速导航的跳转列表

许多首要网站(例如,NYTimes.com、CNN.com 和 Amazon.com)均支持 IE9 固定网站功能,如转到特定的任务或网站中的不同位置的跳转列表。在 IE10 中,跳转列表是导航栏的组成部分,可实现通过触控友好的方式在网站内进行导航。

当用户从“开始”屏幕启动网站时,固定按钮将显示存在该网站的跳转列表:

显示 Fresh Tweet 演示的跳转列表的屏幕截图
显示 Fresh Tweet 演示的跳转列表的屏幕截图

显示的跳转列表与 IE9 在 Windows 7 任务栏中显示的内容相同。

您可以通过页面标记将静态任务添加到您网站的跳转列表中(了解详情)或基于用户交互进行动态添加(了解详情)。Windows 8 中的徽章和跳转列表功能均属于以网站为中心的功能。每个完全限定的域名都只有一组轮询数据和跳转列表数据。

总结

通过与 Windows 8“开始”屏幕集成,Internet Explorer 10 已将网站变为了体验的核心内容。Web 开发人员可以为固定网站图块创造出以网站为中心的视觉效果,并在网站有更新内容时进行共享,还可以提供跳转列表来实现整个网站的快速导航。

我们期待您将这些简单的功能添加到您的 Web 网站中以最大程度地在 Windows 8 中发挥其作用。

—Internet Explorer 项目经理 Rahul Lalmalani

  • Loading...