首先說明，這篇博文不是科普講解的，而是立flag研究的，是關於瀏覽器消息自動推送，就是下面這個玩意：
最近常常在瀏覽器看到這樣的消息推送，還有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:提示的語言，這個沒啥用吧
bady:提示消息的主體內容。會在標題的下面顯示
tag:標記當前通知的標簽
icon:就是提示的時候顯示的圖標啦
renotify：是否替換之前的通知項
下面是一個小小驗證，小伙伴們可以嘗試下，這里頁面上不讓運行js,(果然沒有獨立域名獨立服務器的博客權限爽啊
)就貼一段代碼吧，大家一看就明白：
function showNotice() {
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notification = new Notification("這是一個通知撒:", {
dir: "auto",
lang: "hi",
tag: "testTag",
icon: "https://static.cnblogs.com/images/adminlogo.gif",
body: "通知content"
});
}
})
}
運行這段代碼，在瀏覽器上就會出現，當然前提是瀏覽支持這玩意：
瀏覽器支持情況：
呵呵噠，只能在pc端非ie使用，看情況啦，所以微軟操作系統做這么牛，占有率這么高，為何內置的瀏覽器這么...
好啦，辛苦一番算是把這個問題弄明白了，再也不用懷疑有靈異事件了
以上結果如有紕漏歡迎各位小伙伴指正！
原文地址：瀏覽器桌面通知Notification探究 ，薛陳磊 | Share the world