chrome桌面提醒功能使用

来源：互联网发布：淘宝禁止发布违背编辑：程序博客网时间：2024/06/11 22:23

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和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状态来判断是否弹出窗口。

view plaincopy to clipboardprint?
$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);  

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

3. 识别多Tab的Focus状态

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

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

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

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

view plaincopy to clipboardprint?
/*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等事件响应，而响应函数中的作用范围属于创建该窗口的页面。如下代码：

view plaincopy to clipboardprint?
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窗口。

下面是一个简单的实例：

<html><head><title>Google 桌面通知</title><meta name="generator" content="editplus"><meta name="author" content=""><meta name="keywords" content=""><meta name="description" content=""><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body><button id="btn">显示桌面通知</button> <script type="text/javascript">document.querySelector("#btn").addEventListener('click', notify, false);function notify() {if (window.webkitNotifications) {if (window.webkitNotifications.checkPermission() == 0) {var notification_test = window.webkitNotifications.createNotification("http://images.cnblogs.com/cnblogs_com/flyingzl/268702/r_1.jpg", '标题', '内容'+new Date().getTime());notification_test.display = function() {}notification_test.onerror = function() {}notification_test.onclose = function() {}notification_test.onclick = function() {this.cancel();}notification_test.replaceId = 'Meteoric';notification_test.show();var tempPopup = window.webkitNotifications.createHTMLNotification(["http://www.baidu.com/", "http://www.soso.com"][Math.random() >= 0.5 ? 0 : 1]);tempPopup.replaceId = "Meteoric_cry";tempPopup.show();} else {window.webkitNotifications.requestPermission(notify);}} }</script></body>

</html>