最近由於公司業務需要，領導要求IM消息有像網頁微信那樣有新消息桌面右下角彈出一個提示框的效果！由於自己才疏學淺，一時還沒明白微信是怎么實現的！所以只能問百度（因為懶得翻牆）咯！
在網上搜索了N久，心都快碎了，終於在絕望之際一個亮眼的單詞出現在了我的面前 -- Notification ！終於發現網頁微信是怎么實現的了！
Notification 就是html5的新API，即桌面消息！
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
由於的H5,自然就存在一個瀏覽器支持問題！ 如上代碼，是為了兼容chrome和火狐。這是網友提供的代碼，但是，經我自己測試，chrome 並沒有window.webkitNotification，火狐也沒有window.mozNotification對象。但是它們都有window.Notification對象
經本人親測，目前chrome、火狐、360，QQ瀏覽器都能支持！不過，ie不支持，不僅是ie 6\7\8，連ie11\edge都不支持哦！只想對微軟“呵呵”！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html5桌面通知</title> </head> <body> <input type="button" value="開啟桌面通知" onclick="showNotice('','HTML5桌面消息');"> <script> function showNotice(title,msg){ var Notification = window.Notification || window.mozNotification || window.webkitNotification; if(Notification){ Notification.requestPermission(function(status){ //status默認值'default'等同於拒絕 'denied' 意味着用戶不想要通知 'granted' 意味着用戶同意啟用通知 if("granted" != status){ return; }else{ var tag = "sds"+Math.random(); var notify = new Notification( title, { dir:'auto', lang:'zh-CN', tag:tag,//實例化的notification的id icon:'http://www.yinshuajun.com/static/img/favicon.ico',//通知的縮略圖,//icon 支持ico、png、jpg、jpeg格式 body:msg //通知的具體內容 } ); notify.onclick=function(){ //如果通知消息被點擊,通知窗口將被激活 window.focus(); }, notify.onerror = function () { console.log("HTML5桌面消息出錯！！！"); }; notify.onshow = function () { setTimeout(function(){ notify.close(); },2000) }; notify.onclose = function () { console.log("HTML5桌面消息關閉！！！"); }; } }); }else{ console.log("您的瀏覽器不支持桌面消息"); } }; showNotice("","HTML5桌面消息") </script> </body> </html>
requestPermission - 該方法將向用戶請求詢問顯示提示框的權限。返回值有三個：
default
granted
denied
默認為default,就是需要詢問！讓用戶作出選擇;
如果選擇是則變為 granted,表示允許顯示通知；
denied則是禁止顯示通知！
var notify = new Notification(title,options) 構造函數，兩個參數為title（標題，可設為空，則不顯示標題），options為一個對象，有以下幾個屬性：
dir(文字方向，經測試都不支持)
lang(語言)
body(消息體)
tag(標簽)
icon(icon地址)
Notification對象還有四個事件：
onshow()
onclick()
onclose()
onerror()
分別在消息顯示、被點擊、被關閉和出錯的時候被觸發。下面的例子中完整的展示了這四個事件的使用。通常情況下，只需要處理點擊事件就夠了，比如點擊消息后跳轉到某一特定的頁面。
例子中：window.focus();//如果通知消息被點擊,通知窗口將被激活，即可在其他頁面時點擊后瀏覽器切換到我們的頁面！
http://www.cnblogs.com/lxshanye/p/3560188.html
http://www.xttblog.com/?p=249