为 IE11 网站创建自定义磁贴

在采用新 Windows UI 的 Internet Explorer 中为站点创建自定义磁贴和通知以建立用户兴趣和点击量。 可以为 Internet Explorer 11 创建自定义静态和动态磁贴,此过程与 Windows 应用商店应用类似。

静态磁贴

当用户首次固定你的站点时,它在“开始”屏幕上显示为一个静态磁贴。默认情况下,磁贴上的图像是网站的 Favicon 或默认 IE11 徽标。你可以通过将元数据标志添加到网站的标志或添加浏览器 config 文件来自定义图像。

默认情况下,小型和中型磁贴在“开始”屏幕上可用。如不提供你自己的图像,则将使用通用 IE11 图像。对长方形和大型磁贴而言,必须提供图像。

每当没有通知时会显示静态磁贴,并为要提供给用户的四种磁贴大小分别使用一个图像。以下是标准大小和每种对应的建议图像大小:

磁贴大小标准磁贴尺寸最小图像大小建议的图像大小
小型70 x 7056 x 56128 x 128
中型150 x 150120 x 120270 x 270
长方形310 x 150248 x 120558 x 270
大型310 x 310248 x 248558 x 558

 

注意  所有磁贴的最大大小为 1024 x 1024。

以下是其外观:

小型磁贴 70x70

用于静态磁贴的小型 (70x70) 磁贴的图像

中型磁贴 150x150

用于静态磁贴的中型 (150x150) 磁贴的图像。

长方形磁贴 310x150

用于静态磁贴的长方形 (310x150) 磁贴的图像。

大型磁贴 310x310

用于静态磁贴的大型 (310x310) 磁贴的图像。

 

注意  要覆盖广泛的设备,请使用标准磁贴大小的 1.8 倍的图像,以便使图像可以根据需要进行缩放。

对于用作动态磁贴的磁贴,定义中型、长方形和大型图像。下表提供一些关于使用不同大小的指南。

大小说明
小型小型磁贴不支持通知,且仅显示为静态此贴。
中型默认情况下受支持。显示静态或动态。 将使你可以显示文本和图像。
长方形可选。显示静态或动态。还要求你必须定义中等大小磁贴以添加长方形磁贴。
大型可选。显示静态或动态。还要求你必须定义中型和长方形磁贴。

 

如果忽略某个大小(例如,大型),则该大小磁贴将不可用于调整大小或通知。固定某个磁贴后,你可以在定义的大小之间更改磁贴大小,但要从选择列表中添加或删除大小,则需要你更改元数据,并让用户取消固定你的磁贴,然后重新固定。

若要设置你的默认磁贴,可以使用 XML 文件,在 HTML <head> 元素中或使用 JavaScript API 调用定义元数据。XML 文件最具弹性。如果你拥有若干使用相同磁贴的页面,你可以创建并保留一个文件,并在网站上通过任何页面指向它。

此示例将定义 XML 浏览器 config 文件,以为所有四个可用大小设置默认徽标磁贴和背景颜色。我们已使你可以轻松测试;右键单击并复制显示在上方的餐车图像,并采用示例中使用的文件名将其本地保存。



<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>



你可以将此 XML 文件另存为 browserconfig.xml,然后将其保存在服务器的根上。当用户固定站点时,IE11 自动读取该文件。如要指定自定义 config 文件,请使用页面 <head> 部分中的图元元素。在此示例中,查看声明 config 文件的图元元素。如果页面缺少此图元元素,且用户试图固定你的网站,IE11 会查找名为 browserconfig.xml 的包含独立通知文件(磁贴架构文件)的 URL 的文件,并让 Windows 以指定的时间间隔获取该文件。



<head>
...
<meta name="msapplication-config" content="ieconfig.xml" />
...
</head>


有关使用 HTML 或 JavaScript 定义默认磁贴的详细信息,请参阅 IE11 开发人员指南中的固定站点增强功能

动态磁贴

IE11 动态磁贴与 Windows 8.1 兼容,以在网站上从 XML 文件提取通知数据。固定网站时,会发生如下情况:

  • IE11 获取 browserconfig.xml 文件。
  • IE11 让 Windows 8.1 通知平台以指定的时间间隔从 browserconfig 中指定的轮询 URI 地址获取通知。
  • 通知平台获取磁贴架构文件,并将文本和图像显示在使用指定模板的磁贴上。 此过程会以 browserconfig.xml 文件中设置的时间间隔重复,如构建动态磁贴中所述。
关于 IE 获取 browserconfig 文件、创建文件、Windows 获取通知文件以及更新动态磁贴的图表。

客户端将轮询网站以获取更新并控制是否轮询某个网站及轮询频率,而不是使网站向客户端推送内容。

网站更新磁贴架构文件,以为动态磁贴提供图像和文本。 要提供持续滚动的动态磁贴,可定义最多五个磁贴架构文件。当新的通知可用时,网站会更新磁贴架构文件,Windows 通知平台会获取这些文件,并将内容显示为动态磁贴。

使用 XML browserconfig 文件、<head> 元素中的 META 标记,或从你网站中的 JavaScript 指定磁贴架构文件。

若要指定轮询 URI,则 browserconfig 文件(或已更新 HTML 或 JavaScript 图元代码)包括架构文件地址。例如,以下是早期浏览器 config 文件的更新版本。它现在包含 <notification> 部分。


<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>


浏览器 config 文件中包括的元素如下所示:

元素说明
browserconfig根元素。必需。
msapplication定义了文件适用于的应用程序类型(固定站点)的供应商特定元素。此元素是必需的,且必须声明为 browserconfig 元素的子元素。
磁贴定义默认磁贴徽标图像。 最多包含四个图像,这些图像具有以下属性。

  • square70x70logo
  • square150x150logo
  • wide310x150logo
  • square310x310logo
图像 src 属性指向属性的图像。图像必须为 .JPG、.GIF 或 .PNG 格式文件,小于 200kb,且大小小于 1024x1024 像素。

TileColor 属性采用 RGB 格式色彩(例如 #ff80aa)。

通知为磁贴架构文件定义 URL。URL 可以包括:

  • polling-uri
  • polling-uri2
  • polling-uri3
  • polling-uri4
  • polling-uri5

可以显示的五个 URI 将随机显示。这些是使用要在用户“开始”屏幕上显示的最新新闻和信息更新的文件。

频率轮询请求之间的频率(以分钟为单位)。必须为以下选择中的一种:30、60、360、720 或 1440。
循环控制消息的循环方式。

  • 0:(只有一个通知时的默认值)不循环。
  • 1:(有多个通知时的默认值)为所有磁贴大小循环通知。
  • 2:仅对中型磁贴循环通知。
  • 3:仅对长方形磁贴循环通知。
  • 4:仅对大型磁贴循环通知。
  • 5:仅对中型或长方形磁贴循环通知。
  • 6:仅对中型或大型磁贴循环通知。
  • 7:仅对长方形或大型磁贴循环通知。

 

注意  轮询 URI 指向基于 XML 的磁贴架构文件,这些文件可为每个大小磁贴(中型、长方形和大型)定义 Windows 模板。模板提供用于在动态磁贴上显示通知的格式。

创建磁贴架构文件

磁贴架构文件包含用于单个通知的图像和文本,以及显示如何显示信息的模板。磁贴架构文件定期更新,以为你的用户提供已变化的通知。最多可以定义三个不同大小(每个模板使用一个大小)。模板大小与当前在 Windows 8.1 中显示的磁贴大小相匹配。例如,如果你的当前磁贴大小设置为 310x150,你可以使用名称中包含 310x150 的任何模板(例如 TileWide310x150ImageAndText01)。

以下为 XML 中的架构文件的示例:


<tile>
  <visual lang="en-US" version="2">  
    <binding template="TileSquare150x150PeekImageAndText04" branding="name">
      <image id="1" src="images/2.jpg"/>
      <text id="1">Serving Today: Samosas</text> 
    </binding>

    <binding template="TileWide310x150ImageAndText01" branding="name">
      <image id="1" src="images/2.jpg"/> 
      <text id="1">Serving Today: Samosas</text>
    </binding>
 
    <binding template="TileSquare310x310ImageAndText01" branding="name">
      <image id="1" src="images/2jpg"/>
      <text id="1">Serving Today: Samosas</text>
    </binding>
  </visual>
</tile>

这些元素构成一个典型的文件架构:

元素说明
磁贴必需的根元素。
可视使 Windows 8.1 使用版本 2 模板名称。Windows 8 Windows 应用商店应用支持模板为 版本 1。对于 Windows 8.1,名称已更改并被称为版本 2。必需指定版本 2 才能将动态磁贴与 IE11 一起使用。
绑定定义适用于单个大小磁贴的模板、图像和文本。属性包括:
  • 模板 - 预设 Windows 8.1 模板之一。模板仅适用于中型、长方形和大型磁贴大小。
  • 品牌 - 设置磁贴应该用来显示应用品牌的格式(无、徽标、名称)。
图像提供以下属性

  • src - 要使用的图像 URL。
  • id - 用于区分图像的唯一可选 ID。
图像大小必须小于 200kb,格式可以是 .JPG、.GIF 或 .PNG 文件。
文本提供一行文本和 ID 属性。如果对于绑定存在多行文本,则使用具有唯一 ID 的多个文本元素。

 

虽然仅为支持动态磁贴的三种大小的磁贴提供模板,但你可以选择许多模板。例如,310x310 像素的方形磁贴可具有纯文本(该文本包含或不包含大标题)、小图像和许多文本、大图像和文本以及许多其他格式。模板由 Windows 8.1 定义,且不可更改。有关模板的详细信息,请参阅选择模板。有关完整列表,请参阅磁贴模板目录

组织到一起

现在你具有文件格式,让我们尝试为它编码,如构建动态磁贴中所述。

相关主题

构建动态磁贴
选择模板
固定站点增强功能
磁贴模板目录
使用通知队列

 

 

显示:
© 2014 Microsoft