HTML 五中的webnotification API初探 _Web前端

HTML 5中的webnotification API初探
在HTML 5中,WC3连web notification的机制也制定了初步的草稿标准,
所谓的web notification,就是说比如可以在定时向客户端推送点消息,
比如OA中,可以在用户的浏览器中的右下角弹出一个信息提示窗口,
W3C的标准在:http://www.w3.org/TR/notifications/
目前支持的是chrome比较好,下面看例子:
1 获得api访问权限
首先,如果是chrome的话,必须进行设置,就是在chrome的选项中,把

高级选项中-->内容设置--点通知一栏的设置,然后设置为"允许所有网站发送桌面
通知"
然后代码中,这样获得:

$('#btnGrantPermission').click(function () {
    if (window.Notifications.checkPermission() == 0) {
        createNotification();
    } else {
        window.Notifications.requestPermission();
    }
});

    就是说,尝试去获得API的权限,如果window.Notifications.checkPermission() == 0,则说明浏览器已经有其权限,可以继续做createNotification();
的方法;
    否则用window.Notifications.requestPermission();去获得实际的权限

2 然后看createNotification();这里是实际设置一个弹出窗口的内容,代码为:

 function createNotification() {
            var notification = window.Notifications.createNotification("test.png", "这里是标题", "这里是内容");
            notification.onshow = function () {
                setTimeout(notification.cancel(), 1500);
            }
            notification.show();
        }

这里用createNotification方法创建一个弹出窗口提示,使用很简单,
这里并设置了这个窗口多久就会消失(1.5S).

3 最后,搞一个按钮,然后当用户点按钮时,就会获得一个右下角弹出窗口的提示,虽然
很丑陋,完整代码如下:


<!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>    
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
    <div>
        <input id="btnGrantPermission" type="button" value="Grant Notification Permission" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {        
            if (window.webkitNotifications) {
                window.Notifications = window.webkitNotifications;
                $('#btnGrantPermission').click(function () {
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification();
                    } else {
                        window.Notifications.requestPermission();
                    }
                });
            }            
        });        
 
        function createNotification() {
            var notification = window.Notifications.createNotification("test.png", "这里是标题", "这里是内容");
            notification.onshow = function () {
                setTimeout(notification.cancel(), 1500);
            }
            notification.show();
        }


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