一言不合就上圖：

最近常常在瀏覽器看到這樣的消息推送，還有QQ.com的推送，現在我對這個不了解，不知道叫消息自動推送對不對，這個時chrome瀏覽器的截圖，出現在右下角，其他瀏覽器的樣式可能有些微差別。

websocket通信？瀏覽器廣告推送？html5自動更新？靈異事件？

—————————-我是研究的結果華麗的分割線——————————-

先說下websocket吧，WebSocket 規範是 HTML 5 中的一個重要組成部分，已經被很多主流瀏覽器所支持，也有不少基於 WebSocket 開發的應用。正如名稱所表示的一樣，WebSocket 使用的是套接字連接，基於 TCP 協議，可用於任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持，主要用於s/c的數據通信，但以上的例子不是雙向通信，而是單項消息推送，客戶端只接收消息提示並查看就行了，接下來我在瀏覽器裏找了下，發現了這個：

內容設置-通知-例外管理，發現了消息通知的的來源，是各大網站的設定的端口號，可知其工作原理是服務器端設置好通知服務，在特定時間向客戶端推送相關內容，並且此時用戶不一定在瀏覽當前推送網址的來源網頁，只要開著瀏覽器並且沒用禁止網站消息通知就可以接收通知，所以相對於以前網頁右下方彈出div的提醒方式，這種方式顯得比較高大上；

後來在查閱相關資料的時候發現了瀏覽器桌面通知這個功能，也就是Desktop Notification這個啦，基本的回調方式是這樣的

Notification.requestPermission(callback);

比如運行這個瀏覽器就會提示：

其工作流程大致是檢測用戶是否同意執行，這個方法用於向用戶請求獲得消息提醒的權限，調用這個方法將產生如下效果，分別對應著3中狀態：“granted”（狀態值：0）表示用戶同意消息提醒；“default”（狀態值：1）表示默認狀態，用戶既未拒絕，也未同意；“denied”（狀態值：1）表示用戶拒絕消息提醒。只有在狀態值為0的時候才能夠允許消息提醒，這個值保存在一個內部變量中，並且是只讀的，通過checkPermission()方法可以提取到這個狀態值:

然後如果用戶同意執行有權限推送通知了，就可以配置推送消息給瀏覽器了，看起來很高端的樣子。通過new構造，顯示通知。

推送方法：new Notification(title, options)，其中title是必須參數，表示通知小框框的標題內容，options是可選參數，下面是一些參數的簡單說明（實際內容有很長，有興趣的小夥伴可以看下html5api說明）

lang:提示的語言，這個沒啥用吧

body:提示消息的主體內容。會在標題的下面顯示

tag:標記當前通知的標簽

icon:就是提示的時候顯示的圖標啦

renotify：是否替換之前的通知項

下面是一個小小驗證，小夥伴們可以嘗試下，貼一段代碼吧，大家一看就明白：

function showNotice() {   
    //下面的n大寫
    notification.requestPermission(function (perm) {  
        if (perm == "granted") {  
            //new notification的n大寫
            var notification = new notification("這是一個通知撒:", {  
                dir: "auto",  
                lang: "hi",  
                tag: "testTag",  
                icon: "https://static.cnblogs.com/images/adminlogo.gif",  
                body: "通知content"  
            });  
        }  
    })  
}

運行這段代碼，在瀏覽器上就會出現，當然前提是瀏覽支持這玩意：

瀏覽器支持情況：

呵呵噠，只能在pc端非ie使用，看情況啦，所以微軟操作系統做這麽牛，占有率這麽高，為何內置的瀏覽器這麽…

好啦，辛苦一番算是把這個問題弄明白了，再也不用懷疑有靈異事件了

Notification.requestPermission(function (perm) {  
        if (perm == "granted") {  
            var notification = new Notification("這是一個通知撒:", {  
                dir: "auto",  
                lang: "hi",  
                tag: "testTag2345",  
                icon: "https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png",  
                body: "通知content2"  
            });  
		notification.onclick = function(){open(‘http://baidu.com‘);this.close();};
        }  
    }) ;

以上結果如有紕漏歡迎各位小夥伴指正！

瀏覽器桌面通知Notification實踐