65.9K
CodeProject 正在变化。 阅读更多。
Home

Windows 8 中的固定站点:获得更多网站的可见性

starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (1投票)

2013年1月21日

CPOL

7分钟阅读

viewsIcon

17069

本文将向您展示如何将您的网站徽标放置在 Windows 8 开始屏幕上的应用程序旁边。

30 天开发一个 Windows 8 应用

Windows 8 开始屏幕是查找和保持与所有您喜爱的应用程序和内容连接的最佳位置。应用程序磁贴充满活力,显示您新鲜定制的内容,让您了解您世界中的最新动态。

我们已经介绍过 Internet Explorer 10 在 Windows 8 上的浏览体验。本文将向您展示如何将您的网站徽标放置在 Windows 8 开始屏幕上的应用程序旁边—配以以网站为中心的视觉效果和徽章通知,让您了解是否有新内容。我还会介绍您需要通过几行代码来实现您的网站从左侧磁贴的样式变为右侧磁贴的效果。

 

固定网站 – 超越收藏夹

Windows 用户大部分时间都在网络上度过,并且我们从 Windows 的选择加入遥测数据(官方称为 Microsoft Customer Experience Improvement Program)中得知,他们会一次又一次地返回同一组网站。Windows 8 中的固定网站可以快速轻松地立即访问您的网站。通过徽章通知,网站磁贴会变得生动起来,显示最新信息,并帮助您了解何时有新内容可用。

开发人员可以利用固定网站更好地将其网站与其用户联系起来,并在 Windows 开始屏幕上直接推广其网站的品牌。我们发现,在使用 IE9 在 Windows 7 上使用此功能的网站,其网站访问量平均增加了 15% 到 50%。在 Windows 8 中,即使网站未在浏览器中打开,网站磁贴更新也能为用户提供更好的体验。

以下两个屏幕截图展示了固定网站磁贴和徽章通知。

 

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

 

固定网站磁贴上的徽章通知示例

固定网站磁贴上的以网站为中心的视觉效果

作为 Web 开发人员,您可以提供一个网站图标(favicon),IE10 将在浏览器中(地址栏、新标签页和开始屏幕上)使用它来代表您的网站。IE10 使用较大的网站图标(32 x 32 像素)在固定到开始屏幕时识别网站,这与 IE9 用于固定到任务栏的方式相同。

 

固定带有 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 上固定 Fresh Tweets 演示。固定网站磁贴会定期更新,并在有新推文可用时通知用户。

后台通知需要网站提供的组件。这些是:(1) 徽章通知 XML,一个描述 Windows 徽章通知的 XML 响应;以及 (2) 固定网站元标记,指向 Windows 应轮询通知的位置和轮询频率的网页标记。

徽章通知 XML

Windows 负责轮询和绘制徽章通知。Windows 会轮询描述固定网站磁贴视觉效果的徽章通知 XML。徽章 XML 架构 定义了这个简单的 XML 响应。例如,要将磁贴更新为数字“3”,您可以发送以下 XML:

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

<badge value="3"/>

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

固定网站元标记

下一步是将徽章通知 XML 与网页关联。IE10 使用“application-name”元标记来确定网页是否支持固定网站功能,例如通知和跳转列表。要支持徽章通知,请在您的标记中包含一个新的元标记,其中包含徽章通知 XML 的 URL 以及 Windows 应请求的频率。IE 会在固定时以及从固定网站磁贴后续启动网站时检查页面上是否存在“msApplication-badge”元标记。

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

value 参数包含两部分:polling-uri(必需)和 frequency(可选)。

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

frequency 是一个可选的,表示两次更新之间分钟数的数字,并且必须是以下值之一:

  • 30(Windows 将每 30 分钟轮询一次 URI)
  • 60(1 小时)
  • 360(6 小时)
  • 720(12 小时)
  • 1440(1 天。这是默认值。)

如果省略 frequency 或其值不是上述值之一,则默认为每天更新(1440 分钟)。

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

您还可以直接从网页清除和刷新网站磁贴徽章,以确保网站磁贴是最新的。

当用户通过开始屏幕启动固定网站磁贴时,网页将在一个名为 SiteMode 的独立会话中运行,并可以使用以下 JavaScript 函数更新徽章。

  • window.external.msSiteModeClearBadge() 会清除磁贴上的徽章通知。在 Fresh Tweets 演示中,当用户收到通知并点击磁贴以启动浏览器时,网页会使用 msSiteModeClearBadge() 来清除磁贴上的通知。下次磁贴亮起显示徽章更新时,用户就知道有新内容了。
  • window.external.msSiteModeRefreshBadge() 会调用 Windows 来使用轮询 URI 更新网站上的徽章。例如,用户看到一个显示三个未读消息的固定网站磁贴,并点击该磁贴返回网站。如果他/她只阅读了第一个更新,您可以触发一次更新,使徽章反映正确的已读/未读计数二。

在 Windows 8 Consumer Preview 中,这两个 API 仅在本地 intranet 或受信任的站点区域运行的网站上有效。这将在下一个预览版中修复。要在 Consumer Preview 中为您自己的网站测试这些 API,请使用 Internet 属性对话框的安全选项卡将其域添加到受信任的站点列表。

桌面任务栏通知

出现在桌面任务栏固定网站图标覆盖层上的通知将继续在 Windows 8 和桌面上的 IE10 中工作。此形式的通知不适用于 Windows 8 开始屏幕上的固定网站。Windows 8 以电池高效的方式处理开始屏幕上所有磁贴的通知。

跳转列表可快速导航到网站内部

许多顶级网站,如 NYTimes.com、CNN.com 和 Amazon.com,都支持 IE9 固定网站功能,例如跳转列表,用于访问网站的特定任务或部分。在 IE10 中,跳转列表作为导航栏的一部分提供,方便触摸操作以导航网站。

当用户从开始屏幕启动网站时,固定按钮会显示此网站有可用的跳转列表:

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

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

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

结论

Internet Explorer 10 通过与 Windows 8 开始屏幕的集成,将网站置于体验的中心。Web 开发人员可以为固定网站磁贴创建以网站为中心的视觉效果,共享网站是否有新更新,并提供跳转列表以便快速浏览网站。

我们期待您将这些简单的功能添加到您的网站,以最大限度地提高其在 Windows 8 中的影响力。

Rahul Lalmalani 是 Internet Explorer 团队的项目经理

© . All rights reserved.