HTML5實戰之桌面通知
桌面通知功能能夠讓瀏覽器即使是最小化狀態也能將消息通知給用戶。這和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。
webphp 
jopen 
fanlix