首先說明,這篇博文不是科普講解的,而是立flag研究的,是關於瀏覽器消息自動推送,就是下面這個玩意:javascript
最近經常在瀏覽器看到這樣的消息推送,還有QQ.com的推送,如今我對這個不瞭解,不知道叫消息自動推送對不對,這個時chrome瀏覽器的截圖,出如今右下角,其餘瀏覽器的樣式可能有些微差異。html
websocket通訊?瀏覽器廣告推送?html5自動更新?靈異事件?html5
----------------------------我是研究的結果華麗的分割線-------------------------------java
先說下websocket吧,WebSocket 規範是 HTML 5 中的一個重要組成部分,已經被不少主流瀏覽器所支持,也有很多基於 WebSocket 開發的應用。正如名稱所表示的同樣,WebSocket 使用的是套接字鏈接,基於 TCP 協議,可用於任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 四、Chrome 四、Opera 10.70以及Safari 5等瀏覽器的支持,主要用於s/c的數據通訊,但以上的例子不是雙向通訊,而是單項消息推送,客戶端只接收消息提示並查看就好了,接下來我在瀏覽器裏找了下,發現了這個:web
內容設置-通知-例外管理,發現了消息通知的的來源,是各大網站的設定的端口號,可知其工做原理是服務器端設置好通知服務,在特定時間向客戶端推送相關內容,而且此時用戶不必定在瀏覽當前推送網址的來源網頁,只要開着瀏覽器而且沒用禁止網站消息通知就能夠接收通知,因此相對於之前網頁右下方彈出div的提醒方式,這種方式顯得比較高大上;chrome
後來在查閱相關資料的時候發現了瀏覽器桌面通知這個功能,也就是Desktop Notification這個啦,基本的回調方式是這樣的api
Notification.requestPermission(callback);
好比運行這個瀏覽器就會提示:瀏覽器
其工做流程大體是檢測用戶是否贊成執行,這個方法用於向用戶請求得到消息提醒的權限,調用這個方法將產生以下效果,分別對應着3中狀態:「granted」(狀態值:0)表示用戶贊成消息提醒;「default」(狀態值:1)表示默認狀態,用戶既未拒絕,也未贊成;「denied」(狀態值:1)表示用戶拒絕消息提醒。只有在狀態值爲0的時候纔可以容許消息提醒,這個值保存在一個內部變量中,而且是隻讀的,經過checkPermission()方法能夠提取到這個狀態值:服務器
而後若是用戶贊成執行有權限推送通知了,就能夠配置推送消息給瀏覽器了,看起來很高端的樣子。經過new構造,顯示通知。websocket
推送方法: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