HTML5桌面通知：notification api
1. 为什么需要HTML5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东 进行购物的时候，我是不知道人人网有消息推送过来给我的，而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的， 但是我们需要这么一种策略：无论你在看哪个页面，只要有消息都应该能推送给我看到，这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面，仅仅依附于浏览器。
2. 一个桌面通知生成的正常流程
我们先来看看一个桌面通知是如何生成的：
- 检查浏览器是否支持Notification
- 检查浏览器的通知权限（是否允许通知）
- 若权限不够则获取浏览器的通知权限
- 创建消息通知
- 展示消息通知
NOTE: 关于第一点的说明需要做一些说明，Notification目前还没有标准化，所以目前只支持chrome19+和safari6+；网上有资料显示Firefox26+也支持，但是我拿我的Firefox27检测的结果是无法支持。
3. notification api基础说明及代码示例
目前notification的实现有两种：一种是之前草案中的形式：webkitNotifications对象, 另一种就是未来标准化的形式:Notification对象。首先来说一下webkitNotifications所包含的内容：
3.1 webkitNotifications：
3.1.1. 静态方法
1 2 3 4 5 6 |
|
PS:调用以上方法都会存在安全异常，也就是当前页面的permission是否为0。
3.1.2. 实例方法
1 2 3 4 |
|
3.2 Notification:
在chrome26+ 终端里面输入window.Notification并键入回车键，会发现这东西它也是存在的，根据某些博客的说法，这个Notification会是 webkitNotifications的标准化形态（传说中的进化），这种方式的实现相对于webkitNotifications的实现更简洁，更面 向对象一些。 构造函数：
1 2 3 4 5 6 7 8 9 10 11 |
|
1 2 |
|
3.2.1. 属性
静态属性:
Notification.Permission:
'default' 等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
Test:在chrome的地址栏里面输入http://www.baidu.com, 打开console，并在里面输入Notification.Permission 默认返回的是'default'.
Notes:该属性是只读的不能手动修改
1
2
3
//在百度的首页打开console
Notification.Permission ='granted'
Notification.Permission//'default'
实例属性：
以下属性都需要在Notification实例上才能访问，为只读属性，并且就是通过option来赋值
1 2 3 4 5 |
|
3.2.2 方法
静态方法
Notification.requestPermission() ``` //该方法将会询问用户是否允许显示通知 ``` 该方法不能由页面自主调用，必须由用户主动事件触发，还是以百度的页面为例，百度的搜索框的id为'kw'：
1 2 3 |
|
```Javascript //通过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面信息栏会弹出询问用户是否允许显示桌面通知
```
Notes:当用户同意之后，再次调用该方法则无效，即该方法仅对Notification.Permission不为'granted'的时候起作用
实例方法
1 |
|
Notes: Notification 没有实例方法show(),在Notification实例化的时候，浏览器就已经自动的去处理notification的显示过程了。
3.3 代码示例
以下代码将展示如何使用webkitNotification和Notification来显示桌面通知
3.3.1 webkitNotification
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
3.3.2 Notification
1 2 3 4 5 6 7 8 9 10 11 |
|
4. 参考文档
LINKS
from:http://www.cnblogs.com/lxshanye/p/3560188.html