桌面通知顧名思義能夠給我們的日常工作和學(xué)習(xí)帶來很大的幫助,但是目前支持桌面通知功能的瀏覽器只有Chrome5+。本文主要介紹Web IM中桌面通知實(shí)戰(zhàn)技巧,下面一起來瞧瞧吧!
在實(shí)際使用的過程中,應(yīng)該盡量減少通知功能對(duì)用戶的干擾,最大程度的減少通知功能的出現(xiàn),這就需要解決以下幾個(gè)問題:
1. 收到多條消息時(shí)確保只出現(xiàn)一條通知;
2. 當(dāng)用戶處于IM出現(xiàn)的頁面中時(shí)(頁面處于Focus狀態(tài))將不出現(xiàn)通知;
3. 當(dāng)用戶使用多Tab開啟多個(gè)存在IM的頁面時(shí),只要有一個(gè)頁面處于Focus狀態(tài)將不出現(xiàn)通知;
此外,還需要解決一個(gè)便利性問題
4. 如何讓用戶點(diǎn)擊通知浮動(dòng)層即可定位到具體的聊天窗口
1. 只彈出一個(gè)通知窗口
這個(gè)問題比較好解決,因?yàn)橥ㄖ獙?duì)象擁有一個(gè)名為"replaceId"的屬性。指定該屬性后,只要是相同replaceId的通知窗口彈出,都會(huì)覆蓋之前彈出的窗口。在實(shí)際項(xiàng)目中是給所有的彈出窗口賦了一個(gè)相同的replaceId。不過需要注意的是,這種覆蓋行為只在同域下有效。
2. 確保頁面Focus時(shí)不彈出通知窗口
這個(gè)問題主要是在于判斷瀏覽器窗口是否處于Focus狀態(tài),目前除了監(jiān)聽window的onfocus和onblur事件之外,貌似沒有更好的方式。在項(xiàng)目中就是通過這種方式來記錄窗口的Focus狀態(tài),然后當(dāng)消息到達(dá)時(shí)根據(jù)Focus狀態(tài)來判斷是否彈出窗口。 使用該方法需要注意的地方是,事件注冊(cè)的事件點(diǎn)應(yīng)該盡可能的靠前,如果注冊(cè)太晚則當(dāng)用戶打開頁面后再離開就會(huì)很容易出現(xiàn)狀態(tài)的誤判。
3. 識(shí)別多Tab的Focus狀態(tài)
多頁面間的狀態(tài)共享可以通過本地存儲(chǔ)來實(shí)現(xiàn):
瀏覽器窗口Focus時(shí)修改本地存儲(chǔ)中指定key的值為"focus"
瀏覽器窗口Blur時(shí)修改本地存儲(chǔ)中指定key的值為"blur"
需要注意的是,Chrome下從一個(gè)Tab切換到另一個(gè)Tab時(shí),Blur有可能比Focus后寫入存儲(chǔ)中,因此修改Focus狀態(tài)時(shí)需要異步處理。 實(shí)現(xiàn)以上狀態(tài)共享后,新的消息到達(dá)后,只需要查看本地存儲(chǔ)中’kxchat_focus_win_state’的值是否為blur,如果為blur才彈出窗口。
4. 通知窗口的事件響應(yīng)
通知窗口支持onclick等事件響應(yīng),而響應(yīng)函數(shù)中的作用范圍屬于創(chuàng)建該窗口的頁面。如下代碼: 在onclick的響應(yīng)函數(shù)中訪問的window對(duì)象即屬于當(dāng)前創(chuàng)建頁面,因此可以很方便的與當(dāng)前頁面進(jìn)行交互。以上代碼便實(shí)現(xiàn)了點(diǎn)擊彈出窗口會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的瀏覽器窗口和打開IM窗口。
新聞熱點(diǎn)
疑難解答
圖片精選