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。

HTML5實戰之案頭通知