Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容。那个功能在IE 9中被称之为JumpList。http://www.cnblogs.com/jaxu/archive/2010/11/17/1879617.html
Windows 8对该功能进行了增强,但仍然不够丰富。全新的Windows 8.1对其做了许多改进,包括:
- 在IE的Metro模式下将网站以一个普通App的形式固定到开始菜单中
- 可以提供四种不同尺寸的规格(Small, Medium, Wide, Large),并可以为每一个尺寸单独指定图标
- 为图标指定默认的背景色
- 给Website App单独设定徽标和Windows推送通知
上面给出的几个功能中,为每一个尺寸单独指定图标和为Website App指定Windows推送通知比较具有吸引力。在下面的截图中,红框所显示的App其实是一个网页,其中包含有Windows的推送通知,每隔几秒钟其中的图片和文字就会变换。
与IE 9的JumpList功能类似,IE 11的Pinned Site Enhancements功能也是通过在页面的Head部分添加Meta tag标签来实现的。这里有一篇文章介绍了其中所使用的meta标签:
http://msdn.microsoft.com/en-us/library/ie/bg183312%28v=vs.85%29.aspx
除此之外,还有许多JavaScript API被提供以支持在网页中与Windows推送服务进行交互。上面给出的这篇文章中有比较详细的介绍。先来看看一些基本的meta标签。
<meta name="application-name" content=" Contoso" />
<meta name="msapplication-TileColor" content=" #009900" />
<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />
<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />
msapplication-TileColor标签指定了Website App图标的背景颜色。接下来的四个meta标签给出了在四种不同尺寸下的图标URL。默认情况下,Website App的图标是你网站的favicon,如果没有指定favicon,则使用IE 11默认的图标。默认图标仅提供给Small和Medium尺寸,Wide和Large尺寸的图标必须自己提供。文字在Tile上显示的颜色默认为白色,但是Windows会根据情况改变文字的默认颜色以使其达到最佳显示效果,如当选用一个浅颜色的Tile图标时Windows会自动将文字的显示颜色改为黑色。
Tile size | Standard tile dimensions | Recommended image size | Description |
Small | 70 X 70 | 128 X 128 | 不支持推送通知,只显示静态图标 |
Medium | 150 X 150 | 270 X 270 | 默认显示的图标尺寸。支持并显示推送通知的内容。 |
Wide | 310 X 150 | 558 X 270 | 可选。必须同时提供Medium和Wide尺寸下的图标。支持并显示推送通知的内容。 |
Large | 310 X 310 | 558 X 558 | 可选。必须同时提供Medium,Wide和Large尺寸下的图标。支持并显示推送通知的内容。 |
上表中Standard tile dimensions指的是Windows开始菜单中App Tile的标准尺寸大小,Recommended image size是App图标的推荐尺寸。建议图标的尺寸大小是Tile尺寸大小的1.8倍左右,这样可以覆盖大部分的移动设备,使其有较好的用户体验。
Small tile 70X70 |
Medium tile 150X150 |
Wide tile 310X150 |
Large tile 310X310 |
msapplication-notification标签用于设定Windows推送通知的内容。frequency用来告诉Windows多长时间去刷新notification xml的源数据,默认值为30分钟,你可以指定60(1小时),360(6小时),720(12小时)或者1440(1天)。注意frequency不是用来设定notification的内容在Tile中多长时间变换一次,notification内容变换的时间是由Windows本身决定的,frequency只是用来设定Windows多长时间去重新获取数据来刷新缓存。polling-uri用来指定notification数据源的地址,最多可以指定5个推送通知的数据源,每一个数据源仅提供一条推送通知信息,后面会有介绍。
除此之外,你还可以通过JavaScript来动态设定推送通知。看下面的代码:
document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false); function StartPeriodicUpdateBatch()
{
var arrURI = ["notifications/contoso1.xml", "notifications/contoso2.xml", "notifications/contoso3.xml"];
window.external.msEnableTileNotificationQueue(true);
window.external.msStartPeriodicTileUpdateBatch(arrURI);
document对象绑定了事件mssitepinned,该事件当网页在Windows中被pin的时候触发。事件的代码指定了3个推送通知的地址,然后告诉Windows将推送加入到队列中。有许多新增加的JavaScript事件、方法和函数以帮助我们自定义网站内容,前面给出的msdn页面中有更详细的说明。这里有一个例子:http://pinnedsitedemo.cloudapp.net/testdrive/index.aspx
如果你觉得通过meta标签单独设置太麻烦,你也可以提供一个XML配置文件,这样会更灵活一些。如果配置文件被命名为browserconfig.xml,将其存放到网站服务器的根目录下,当用户将网页固定到Windows开始菜单时IE 11会自动读取该文件的内容。如果采用自定义的名称,则需要通过msapplication-config标签进行指定,如下:
<meta name="msapplication-config" content="IEconfig.xml" />
所提供的XML配置文件必须使用browser congiguration规定的节点,详细的说明可以看这里:http://msdn.microsoft.com/en-us/library/ie/dn320426(v=vs.85).aspx
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
<TileColor>#009900</TileColor>
</tile>
<badge>
<polling-uri src="badge.xml"/>
<frequency>30</frequency>
</badge>
<notification>
<polling-uri src="1.xml"/>
<polling-uri2 src="2.xml"/>
<polling-uri3 src="3.xml"/>
<polling-uri4 src="4.xml"/>
<polling-uri5 src="5.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
其中指定了Tile的图标和背景色,以及badge和notification相关的设置。有关什么是badge以及如何在XML文件中自定义badge可以看这里http://msdn.microsoft.com/en-us/library/windows/apps/br212849.aspx
你最多只能在一个网站中指定5个推送通知,Windows会负责进行切换,frequency用来告诉Windows多长时间去刷新一下数据源来更新本地缓存信息。cycle是一个枚举值,用来指定哪些推送通知会在特定尺寸的Tile中显示,
- 0:不显示任何推送通知(当只提供了1条推送通知时为默认值)
- 1:显示所有指定的推送通知(当提供了多条推送通知时为默认值)
- 2:只在Medium尺寸的Tile下显示推送通知
- 3:只在Wide尺寸的Tile下显示推送通知
- 4:只在Large尺寸的Tile下显示推送通知
- 5:仅在Medium和Wide尺寸的Tile下显示推送通知
- 6:仅在Medium和Large尺寸的Tile下显示推送通知
- 7:仅在Wide和Large尺寸的Tile下显示推送通知
另外,有关notification的XML文件的格式说明可以看这里:http://msdn.microsoft.com/en-us/library/windows/apps/br230841.aspx
其中有对每个节点和属性的详细介绍,下面是一个例子:
<tile>
<visual lang='en-US' version='2'> <binding template="TileSquare150x150PeekImageAndText04" branding="name">
<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
<text id="1">Serving Today: Tacos</text>
</binding> <binding template="TileWide310x150ImageAndText01" branding="name">
<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
<text id="1">Serving Today: Tacos</text>
</binding> <binding template="TileSquare310x310ImageAndText01" branding="name">
<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
<text id="1">Serving Today: Tacos</text>
</binding> </visual>
</tile>
几个主要的地方说明一下,更全面的介绍大家可以去看前面给出的那个地址。visual节点的version属性的值如果是在Windows 8.1上的话就应该指定为2,如果是Windows 8则为1。每一个visual节点下允许有最多3个binding子节点,用来指定该推动通知可以支持哪些模板。模板由template属性指定,它是一个枚举值,有多达70多种不同的模板,详细的介绍可以看这篇文章http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx branding属性有三个枚举值,用以说明Tile如何显示App的brand,可以是none,logo或者name。子节点image和text用来提供推送通知要显示的图片和文字,其中的id是一个占位符标识,当指定不同的template时,Tile中内容的布局也会有区别,可以看template的详细说明。图片要求必须小于200kb,而且只能是jpg,gif或png。图片的src必须是以下几种类型:
- http://或者https://开头 - 基于Web的图片地址,必须使用绝对地址,相对地址无效,会导致binding所定义的推送通知无法显示。
- ms-appx:// - 包含在App包里的图片地址。
- ms-appdata:///local/ - 本地存储的图片地址。
- file:/// - 本地图片路径。只支持desktop apps,不支持Windows Store apps。
需要注意的是,在同一个notification的XML文件中,最多三个的binding子节点只是描述了同一个推送通知的内容(其中包括图片和文字),只是区别说明了在不同template下要显示的内容,你完全可以在几个相似的template中提供完全相同的内容,只要不影响推送通知在template中的显示。前面提到过,一个网站最多只能提供5个推送通知,也就是说你最多只能提供5个notification XML文件,该文件可以是静态的XML文件,也可以是Web Service或任何其它的URI,但XML结构必须要符合定义。
上图给出了推送通知在Windows 8.1和IE 11中的工作流程。在服务端,我们可以利用代码将msapplication-config节点添加到页面的head部分,如下例:
HtmlMeta meta_msapplication_config = new HtmlMeta();
meta_msapplication_config.Name = "msapplication-config";
meta_msapplication_config.Content = _browserConfig;
Page.Header.Controls.Add(meta_msapplication_config);
总之,Windows 8.1和IE 11丰富了对网页进行pin操作和提供推送通知的功能,使得我们不仅可以将自己喜欢的页面添加到收藏夹,还可以将其以普通App的方式加入到Windows开始菜单中,同时推送通知还可以及时地告诉网站的受众最近有哪些内容做了更新。
附加一个从MSDN上下载的官方例子:Pinned Sites - Live Tiles support in IE11
Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知的更多相关文章
- 将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...
- Windows Phone开发(44):推送通知第二集——磁贴通知
原文:Windows Phone开发(44):推送通知第二集--磁贴通知 前面我们说了第一个类型--Toast通知,这玩意儿不知大家是不是觉得很新鲜,以前玩.NET编程应该没接触过吧? 其实这东西绝对 ...
- Windows Phone开发(43):推送通知第一集——Toast推送
原文:Windows Phone开发(43):推送通知第一集--Toast推送 好像有好几天没更新了,抱歉抱歉,最近"光荣"地失业,先是忙于寻找新去处,唉,暂时没有下文.而后又有一 ...
- Windows Azure Service Bus Notification Hub推送通知
前言 随着Windows Azure 在中国的正式落地,相信越来越多的人会体验到Windows Azure带来的强大和便利.在上一篇文章中, 我们介绍了如何利用Windows Azure中的Servi ...
- 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知
[源码下载] 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后台任务 推送通 ...
- 与众不同 windows phone (10) - Push Notification(推送通知)之推送 Tile 通知, 推送自定义信息
原文:与众不同 windows phone (10) - Push Notification(推送通知)之推送 Tile 通知, 推送自定义信息 [索引页][源码下载] 与众不同 windows ph ...
- 与众不同 windows phone (9) - Push Notification(推送通知)之概述, 推送 Toast 通知
原文:与众不同 windows phone (9) - Push Notification(推送通知)之概述, 推送 Toast 通知 [索引页][源码下载] 与众不同 windows phone ( ...
- Windows Phone开发(45):推送通知大结局——Raw通知
原文:Windows Phone开发(45):推送通知大结局--Raw通知 为什么叫大结局呢?因为推送通知服务就只有三种,前面扯了两种,就剩下一种--Raw通知. 前面我们通过两节的动手实验,相信大家 ...
- 背水一战 Windows 10 (121) - 后台任务: 推送通知
[源码下载] 背水一战 Windows 10 (121) - 后台任务: 推送通知 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 推送通知 示例演示如何接收推送通知/WebA ...
随机推荐
- java时间相减(转载)
package com.jie.java.phone; import java.text.ParseException; import java.text.SimpleDateFormat; impo ...
- PS 制作复印件及盖章效果
对要处理的部分选定 1.执行 滤镜--杂色--添加杂色 2.执行 滤镜--模糊--高斯模糊 3.ctrl+L 执行 色阶 调整为 满意的效果 4.最后添加想要的颜色 图像--调整--渐变映射 关键 ...
- sql良好习惯
我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么我么还能保证下一段时间系统还能流畅的运行吗?我么还 ...
- LINUX内核分析第七周学习总结:可执行程序的装载
LINUX内核分析第七周学习总结:可执行程序的装载 韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/cours ...
- 对于for循环构成的九宫格里的button,如何满足“有默认选中的一个,并且只能选中一个”?
需要构造一个全局变量self.priceBtn 在九宫格写法中 ) { self.priceBtn = btn; self.priceBtn.selected = YES; } 在button的点击方 ...
- MySQL-->基础-->001-->MySQL基本操作
一.MySQL安装 卸载mysql 第一步 sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-ser ...
- WPF 获得鼠标相对于屏幕的位置,相对于控件的位置
相对于屏幕的位置 第一步: /// <summary> /// 用于获得鼠标相对于屏幕的位置 /// </summary> public class Win3 ...
- javascript 高级程序设计 十二
1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...
- c++之socket,阻塞模式
这里描述下socket的阻塞模式: 首先,socket有几个函数 socket() 创建socket bind() 绑定socket到一个地址 listen() 开启soket监听 accept() ...
- js中json对象的深拷贝
/** * 对象深拷贝 * @param obj */ function deepCopy(obj) { var txt=JSON.stringify(obj); return JSON.parse( ...