HTML5开发桌面提醒功能

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：

1. 收到多条消息时确保只出现一条通知;
2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
3. 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于Focus状态将不出现通知;
4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口
5.此外，还需要解决一个便利性问题

桌面提醒Notification的API

window.webkitNotifications

requestPermission 请求通讯许可
checkPermission 检查通讯许可
createNotification 创建通讯
show 显示通知

代码实现

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head
 4 <meta charset="gbk">  
 5 <title>Creating OS notifications in HTML5</title>
 6 </head>
 7 <body>
 8 <input type="button" value="验证授权" onclick="init();" />
 9 <input type="button" value="弹出消息" onclick="notify();" />
10 
11     <script type="text/javascript">
12         const miao = 5;
13 
14         function init() {
15             if (window.webkitNotifications) {
16                 window.webkitNotifications.requestPermission();
17             }
18         }
19 
20         function notify() {
21             var icon = "logo.png";
22             var title = "Hello World";
23             var body =  "You Are My World (5秒后自动关闭)";
24 
25             if (window.webkitNotifications) {
26                 if (window.webkitNotifications.checkPermission() == 0) {
27                     var popup = window.webkitNotifications.createNotification(icon, title, body);
28                     popup.ondisplay = function(event) {
29                         setTimeout(function() {
30                             event.currentTarget.cancel();
31                         }, miao * 1000);
32                     }
33                     popup.show();
34                     popup.show();
35                 } else {
36                     window.webkitNotifications.requestPermission();
37                     return;
38                 }
39             }
40         }
41     </script>
42 
43 </body>
44 </html>

HTML5开发桌面提醒功能 Demo html5-desktop-notification.html (只支持 Chrome 浏览器)

HTML5开发 桌面提醒功能

桌面提醒的介绍

桌面提醒Notification的API

代码实现

HTML5开发桌面提醒功能