html5 桌面提醒：Notifycations

HTML5中的桌面提醒（web notifications）可以在当前页面窗口弹出一个消息框，这个消息框是跨 Tab 窗口的、本地化的，可以叠加在其他程序界面上，不局限与浏览器窗口内，触发时及时浏览器最小化或者不在屏幕最前面也能显示消息窗，这在用户打开多个 tab 浏览网页或最小化浏览器、或切换至其他软件界面时，提醒比较方便，容易让用户看到。目前主要是 webkit 内核支持该功能。

该功能在 chrome 下需要以 http 方式打开网页才能启用。

桌面提醒功能由 window.webkitNotifications 对象实现（webkit内核）。

window.webkitNotifications 对象没有属性，有四个方法：

1.requestPermission()

　　该方法用于向用户申请消息提醒权限，如果当前没有开放该权限，浏览器将弹出授权界面，用户授权后，在对象内部产生一个状态值（一个0、1或 2 的整数）：

0：表示用户同意消息提醒，只在该状态下可以使用信息提醒功能；

1：表示默认状态，用户既未拒绝，也未同意；

2：表示用户拒绝消息提醒。

2.checkPermission()

　　这个方法用于获取 requestPermission() 申请到的权限的状态值。

3.createNotification()

　　这个方法以纯消息的方式创建提醒消息，它接受三个字符串参数：

iconURL：在消息中显示的图标地址,

title：消息的标题，

body：消息主体文本内容

该方法会返回一个 Notification对象，可以针对这个对象做更多的设置。

Notification 对象的属性与方法：

    dir: ""   

    onclick: null

    onclose: null

    ondisplay: function (event) {

    onerror: null

    onshow: null

    replaceId: ""

    tag: ""

    __proto__: Notification

    addEventListener: function addEventListener() { [native code] }

    cancel: function cancel() { [native code] }

    close: function close() { [native code] }

    constructor: function Notification() { [native code] }

    dispatchEvent: function dispatchEvent() { [native code] }

    removeEventListener: function removeEventListener() { [native code] }

    show: function show() { [native code] }

    __proto__: Object

　　dir：设置消息的排列方向，可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)。

　　tag：为消息添加标签名。如果设置此属性，当有新消息提醒时，标签相同的消息只显示在同一个消息框，后一个消息框会替换先前一个，否则出现多个消息提示框，但是最多值显示3个消息框，超过3个，后继消息通知会被阻塞。

　　onshow：当消息框显示的时候触发该事件；

　　onclick：当点击消息框的时候触发该事件；

　　onclose：当消息关闭的时候触发该事件；

　　onerror：当出现错误的时候触发该事件；

方法：

　　addEventListener && removeEventListener：常规的添加和移除事件方法；

　　show：显示消息提醒框；

　　close：关闭消息提醒框；

　　cancel：关闭消息提醒框，和 close一样；

4.createHTMLNotification()

　　该方法与 createNotification() 不同的是，他以HTML方式创建消息，接受一个参数： HTML 文件的URL，该方法同样返回 Notification对象。

一个实例：

<!DOCTYPE HTML>  
<html>  
<head>  
    <title>notifications in HTML5</title>  
</head>  
<body>     
    <form>  
        <input id="trynotification" type="button" value="Send notification" />  
    </form>  
   
    <script type="text/javascript">  
       
        document.getElementById("trynotification").onclick = function(){
            notify(Math.random());
        };

        function notify(tab) {  
            if (!window.webkitNotifications) { 
                return false;
            }

            var permission = window.webkitNotifications.checkPermission();  
            if(permission!=0){                   
                window.webkitNotifications.requestPermission(); 
                var requestTime = new Date();
                var waitTime = 5000;  
                var checkPerMiniSec = 100;            
                setTimeout(function(){
                    permission = window.webkitNotifications.checkPermission();  
                    if(permission==0){
                        createNotification(tab);
                    }else if(new Date()-requestTime<waitTime){
                        setTimeout(arguments.callee,checkPerMiniSec);
                    }
                },checkPerMiniSec);
            }else if(permission==0){
                createNotification(tab);
            }   
        }  

         function createNotification(tab){
                var showSec = 10000;  
                var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";  
                var title = "[" + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds";  
                var body =  "hello world, i am webkitNotifications informations";        
              
                var popup = window.webkitNotifications.createNotification(icon, title, body);  
                popup.tag = tab;
                popup.ondisplay = function(event) {  
                    setTimeout(function() { 
                        event.currentTarget.cancel();  
                    }, showSec);  
                }  
                popup.show();
        }

    </script>  
   
</body>  
</html>