web of science_Web IM中桌面通知实战技巧

更新时间:2019-12-27 来源:编程 点击:

【www.hzclsc.cn--编程】

桌面通知顾名思义能够给我们的日常工作和学习带来很大的帮助,但是目前支持桌面通知功能的浏览器只有Chrome5+。本文主要介绍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窗口。

本文来源:http://www.hzclsc.cn/ruanjianzixun/44443.html

为您推荐

制作电音的软件|电音创作软件KORG将于明年登录Switch

如果你经常关注我们对任天堂Switch的报道,你可能还记得有家公司正在为Switch制作学习编程的软件,接下来要告诉各位,Switch不单可以用来编程,而且还可以作曲!日本知名的电子音乐作曲工作站软件游戏资讯

2020-12-05 17:04:48   做电音的软件   电音软件手机版  

【支付宝小程序在哪里找】支付宝小程序开发者公测地址 支付宝小程序申请公测网址

支付宝小程序目前已经开始公测了,为大家带来支付宝小程序开发者公测地址,支付宝小程序是手机应用嵌入支付宝客户端的一种方法,下面是支付宝小程序申请公测网址! 支付宝小程序开发者公测地址 特色能力开发服务成编程开发

2020-11-22 11:04:37   支付宝小程序怎么建立   支付宝小程序怎么开发  

[c罗]c++ vector用法详解 c++ vector用法总结

c++ vector是在c++中开发过程中c++ vector作为一个十分有用的容器,许多朋友还不是很清楚c++ vector用法,不知道c++ vector到底有什么优秀的用法,不用着急一起来看看编程开发

2020-11-22 11:04:37   pcba   c盘满了怎么清理  

【eclipse如何导出项目】eclipse怎么导出项目 eclipse导出项目教程

eclipse作为用户量十分大的编程开发软件,有许多新手用户朋友或者刚开始接触这款软件的朋友经常会出现在使用eclipse的时候不知道该怎么导出已经读取到软件中的项目,其实很简单,一起来看看ecli教你一招

2020-11-10 07:04:06   eclipse怎么导入项目   eclipse怎么打开项目  

jdk环境变量配置win10|JDK环境变量配置WIN7 WIN7JDK环境变量配置教程

JDK怎么进行环境变量配置一直是困扰着许多入门编程员的问题,许多用户朋友们如果重新换了一台设备,很容易出现不知道怎么进行环境配置的情况,不用担心,小编为大家带来了详细的在WIN7系统下如果进行JDK教你一招

2020-11-07 11:05:38   jdk安装与环境变量配置   安装jdk并配置环境变量