分享Web。

桌面通知对我们的日常工作和学习有很大帮助，但支持桌面通知的唯一浏览器是Chrome5+。在小凡下面为大家介绍WebIM桌面通知的实用技巧，让我们来看看吧!

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();

};