桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过,目前支持Desktop Notification功能的浏览器只有Chrome5+。

  关于通知的基础知识可以参考以下文档:

  W3C标准:http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html

  使用教程:http://www.html5rocks.com/en/tutorials/notifications/quick/

  本文主要记录通知功能在Web IM中实际使用时的一些经验。

  

  在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:

  1. 收到多条消息时确保只出现一条通知;

  2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;

  3. 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;

  此外,还需要解决一个便利性问题

  4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口

  1. 只弹出一个通知窗口

  这个问题比较好解决,因为通知对象拥有一个名为"replaceId"的属性。指定该属性后,只要是相同replaceId的通知窗口弹出,都 会覆盖之前弹出的窗口。在实际项目中是给所有的弹出窗口赋了一个相同的replaceId。不过需要注意的是,这种覆盖行为只在同域下有效。

  2. 确保页面Focus时不弹出通知窗口

  这个问题主要是在于判断浏览器窗口是否处于Focus状态,目前除了监听window的onfocus和onblur事件之外,貌似没有更好的方式。在项目中就是通过这种方式来记录窗口的Focus状态,然后当消息到达时根据Focus状态来判断是否弹出窗口。

$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);

  使用该方法需要注意的地方是,事件注册的事件点应该尽可能的靠前,如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。

  3. 识别多Tab的Focus状态

  多页面间的状态共享可以通过本地存储来实现:

  浏览器窗口Focus时修改本地存储中指定key的值为"focus"

  浏览器窗口Blur时修改本地存储中指定key的值为"blur"

  需要注意的是,Chrome下从一个Tab切换到另一个Tab时,Blur有可能比Focus后写入存储中,因此修改Focus状态时需要异步处理。

/*window on focus事件*/ 
//用延时是为了解决多个Tab之间切换时,始终让Focus覆盖其他Tab的Blur事件 
//注: 如果在点击Tab之前没有Focus到document上则点击Tab是不会触发Focus的 
setTimeout( function(){ 
    Storage.setItem( 'kxchat_focus_win_state', 'focus' ); 
}, 100); 
/*window on blur事件*/ 
Storage.setItem( 'kxchat_focus_win_state', 'blur' ); 

  实现以上状态共享后,新的消息到达后,只需要查看本地存储中’kxchat_focus_win_state’的值是否为blur,如果为blur才弹出窗口。

  4. 通知窗口的事件响应

  通知窗口支持onclick等事件响应,而响应函数中的作用范围属于创建该窗口的页面。如下代码:

var n = dn.createNotification( 
    img, 
    title, 
    content 
); 
//确保只有一个提醒 
n.replaceId = this.replaceId; 
 
n.onclick = function(){ 
    //激活弹出该通知窗口的浏览器窗口 
    window.focus(); 
    //打开IM窗口 
    WM.openWinByID( data ); 
    //关闭通知窗口 
    n.cancel(); 
};

  在onclick的响应函数中访问的window对象即属于当前创建页面,因此可以很方便的与当前页面进行交互。以上代码便实现了点击弹出窗口会跳转到对应的浏览器窗口和打开IM窗口。

  具体的实现可以在Chrome中进入 http://www.kaixin001.com 体验WebIM。

HTML5实战之桌面通知的更多相关文章

  1. HTML5开启浏览器桌面通知 Web Notification

    说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...

  2. 轻松让HTML5可以显示桌面通知Notification非常实用

    使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...

  3. chrome浏览器的桌面通知

    最近在使用朋友网(不加链接,避免有打广告的嫌疑),发现会出现提示“是否允许网站显示桌面通知?”,如下图所示: 这种做法,在页面加载完时直接调用请求,比起开心网的这种提示感觉有些野蛮了.开心网的桌面通知 ...

  4. HTML5 桌面通知:Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

  5. 介绍一个比较酷东西:HTML5 桌面通知(Notification API)

    Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...

  6. HTML5桌面通知:notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  7. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  8. HTML5桌面通知:notification api

    1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户.这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不 ...

  9. HTML5中的Web Notification桌面通知(右下角提示)

    html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...

随机推荐

  1. 使用POI把Word Excel转为HTML

    此方法是针对Office2003的,但是word中如果有图片,图片能够解析出来但是HTML文件中不显示.也不支持excel中的图片解析. 所需jar包如下如下: 1:PoiUtil.java pack ...

  2. Handler处理长时间事件

    当我们在处理一些比较长时间的事件时候,比如读取网络或者数据库的数据时候,就要用到Handler,有时候为了不影响用户操作应用的流畅还要开多一个线程来区别UI线程,在新的线程里面处理长时间的操作.开发的 ...

  3. Linux企业级项目实践之网络爬虫(6)——将程序设计成为守护进程

    在linux或者unix操作系统中在系统的引导的时候会开启很多服务,这些服务就叫做守护进程.为了增加灵活性,root可以选择系统开启的模式,这些模式叫做运行级别,每一种运行级别以一定的方式配置系统. ...

  4. Oracle11gRAC安装

    安装Oracle RAC 一.硬件环境 ①用虚拟机搭建两台机器,操作系统都为: [root@node1 ~]# cat /etc/issue Red Hat Enterprise Linux Serv ...

  5. Java中BigDecimal的8种舍入模式是怎样的

    Java中BigDecimal的8种舍入模式是怎样的?下面长沙欧柏泰克软件学院和大家一起来学习下吧:  java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecima ...

  6. Building bridges_hdu_4584(排序).java

    Building bridges Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) ...

  7. [RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()

    So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cac ...

  8. [Cycle.js] Making our toy DOM Driver more flexible

    Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent ...

  9. Fedora安装VirtualBox时出现错误Kernel driver not installed (rc=-1908)的解决办法

    新建虚拟机后启动时出现如下错误: Kernel driver not installed (rc=-1908) The VirtualBox Linux kernel driver (vboxdrv) ...

  10. FileZilla 安装配置参考

    http://www.admin10000.com/document/72.html 解决 NAT issue https://wiki.filezilla-project.org/Network_C ...