桌面弹出通知

[html]  
<!DOCTYPE html>  
<html>  
 <head>  
  <title>桌面通知Notification </title>  
   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <script>  
      
    </script>  
 </head>  
  
 <body>  
   
    <input type="button" value="测试桌面通知" onclick = "checkPermissionAndShow()" />  
<script>  
    window.Notifications = window.Notifications || window.webkitNotifications;  
  
    function checkPermissionAndShow(){  
        var perLel = window.Notifications.checkPermission();  
  
        if(perLel == 0){  
            console.log('已授权...');  
            showNotification();  
  
        }else if(perLel ==1){  
            console.log('待授权...');  
            window.Notifications.requestPermission(checkPermissionAndShow);  
  
        }else{  
            console.log('已禁止...');  
  
        }  
    }  
  
    function showNotification(){  
         var newNotification = Notifications.createNotification(  
                'http://avatar.csdn.net/4/5/3/1_qyf_5445.jpg',  
                '桌面通知',  
                '桌面通知 示例');  
        newNotification.show();  
  
    }  
</script>  
 </body>  
   
</html>

补充：web前端 , HTML/CSS  ,