HTML5学习笔记（一）：桌面提醒

Danny.hupeng

<div id="cnblogs_post_body">HTML5中的桌面提醒（web notifications）能够让用户得到实时的消息提醒，在网页多窗口聊天的时候，这一功能将极大的方便用户。例如新浪微博私信聊天时候的消息提醒功能。这里只考虑浏览器原生的功能，对于那些通过插件来实现的桌面提醒功能不做考虑（如360安全浏览器）。但是这一功能目前只有google chrome（21.0+）和Safari（6.0+）部分实现了，在手机端，也就Blackberry browser实现了（完全实现），实现这一功能的浏览器均以webkit为内核。应用的范围还很有限，在HTML5如火如荼的今天，我们依然可以做个很好的展望。
API介绍
　　桌面提醒功能是由window对象下的webkitNotifications来实现的，通过window.webkitNotifications将返回一个NotificationCenter对象。这个对象没有属性，但是却关联着四个方法：
1.requestPermission()
　　这个方法用于向用户请求获得消息提醒的权限，调用这个方法将产生如下效果（下图），分别对应着3中状态：“granted”（状态值：0）表示用户同意消息提醒；“default”（状态值：1）表示默认状态，用户既未拒绝，也未同意；“denied”（状态值：1）表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒，这个值保存在一个内部变量中，并且是只读的，通过checkPermission()方法可以提取到这个状态值。

2.checkPermission()
　　这个方法用于获取请求权限的状态值，并返回这个值。
3.createNotification()
　　这个方法以纯消息的方式创建提醒消息，它接受三个参数：iconURL, title, body。这三个参数均为字符串格式，iconURL表示一个图标地址、title表示消息标题、body表示消息主体，默认这三个参数为空字符串。
调用这个方法会返回一个Notification对象，我们可以针对这个对象做更多的设置。
属性：
　　dir：设置消息的排列方向，可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)，下图展示的是不同取值的显示效果。
                                                                                                                                                     
      
　　tag：为消息添加标签。如果设置此属性，当有新消息提醒时，标签相同的消息，后一个消息框会替换先前一个，不会出现多重消息提示框。
　　onshow：事件属性，当消息框显示的时候触发该事件；
　　onclick：事件属性，当点击消息框的时候触发该事件；
　　onclose：事件属性，当消息关闭的时候触发该事件；
　　onerror：事件属性，当出现错误的时候触发该事件；（TODO：错误类型）
方法：
　　addEventListener && removeEventListener：常规的添加和移除事件方法；
　　show：显示消息提醒框；
　　close：关闭消息提醒框；
　　cancel：关闭消息提醒框（这个方法和close方法产生的效果是一样，不清楚他们之间有什么深层次的区别）；
　　dispatchEvent：关于这个方法可以参考这里；
4.createHTMLNotification()
　　这个方法以HTML方式创建消息提醒，它接受一个参数，即HTML消息文档的URL。同样调用这个方法也会返回一个Notification对象，这个对象与用纯文本方式创建消息提醒返回的Notification对象相同，故对其属性和方法就不重述了。
实例
下面要创建一个桌面提醒的实例，真是的感受下这个一新功能。
1、由于支持桌面的浏览器还很有限，在使用这一功能前不可避免的要进行检测是否支持。
<div class="cnblogs_code">1 function supported(){2     if(window.webkitNotifications){3         return true;4     } else{5         return false;6     }7 }