HTML5开发 桌面提醒功能

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

标签:  HTML5 ,  桌面提醒

作者： Leo_wl

　　　　

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于HTML5开发 桌面提醒功能的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48132