HTML5 Notification消息通知

Notification 對象用來爲用戶設置和顯示桌面通知，Web Notifications API 能夠將通知發送至頁面以外的系統層級上，所以，即使應用處於空閒狀態或是在後臺，web 應用仍然能夠經過這個 API 向用戶發送信息。好比網頁版微信，每當用戶收到一條新的消息，就會有一條通知顯示給用戶

用法

var notification = new Notification(title, [options])

參數

Param	Type	Description
title	string	顯示的通知標題
[options]	object	顯示通知的配置項，可選
[options.dir]	string	文字方向， 取值爲 auto、ltr、rtl 之一
[options.lang]	string	通知的語言，這個字符串必須在 BCP 47 language tag 文檔中是有效的。
[options.body]	string	通知的內容
[options.tag]	string	通知的 id，經過此 id 能夠對通知進行刷新、替換或移除
[options.icon]	string	通知的圖標圖片URL，將被用於顯示通知的圖標。

請求權限 
要顯示通知，須要獲得用戶的受權，Notification 提供了 requestPermission 方法向用戶申請顯示通知的權限，此方法只能被用戶行爲調用（好比在onclick 事件中）

Notification.requestPermission(function(permission) {

   if (permission === "granted") {

       console.log(11)

       popNotice()

   }

});

權限狀態 
只讀屬性 Notification.permission 能夠用來獲取用戶受權狀態

• denied ：拒絕通知顯示

• granted ：容許通知顯示

• default ：用戶還沒有被詢問是否受權，在瀏覽器中表現與 denied 相同

事件處理 
Notification 實例上的事件監聽

• onshow/ondisplay : 在通知顯示的時觸發

• onclick : 當用戶點擊通知時觸發

• onerror : 當通知出現錯誤時觸發

• onclose ：當用戶關閉通知時觸發

Example

<button class="button">Hello</button>

<script type="text/javascript">

var button = document.querySelector('.button')

 

button.addEventListener('click', function() {

   if (!("Notification" in window)) {

       alert("不支持 notification");

   } else if (Notification.permission === "granted") { // 容許通知

       notice()

   }else if (Notification.permission !== 'denied') { // 用戶沒有選擇是否顯示通知，向用戶請求許可

       Notification.requestPermission(function(permission) {

           if (permission === "granted") {

               notice()

           }

       });

   }

}, false)

 

 

function notice() {

   var notification = new Notification("你好，JavaScript",{

       body:'微信訂閱號',

       icon:"https://mp.weixin.qq.com/misc/getheadimg?token=990524500&fakeid=3006291623&r=674680"

   });

 

   notification.onclick = function(){

       notification.close()

   }

}

</script>

瀏覽器支持

• Firefox 22+

• Cheome 22+

• Safari 6+

• Opera 25+

• Edge 14+

pc端基本支持（忘掉IE吧），移動端，在ios safari 上暫不支持，androd 4.4+ browser須要添加 webkit 前綴，上月24號發佈的Firefox 51 for android 已經支持消息通知，安卓用戶能夠下載最新的Firefox瀏覽器在手機端體驗（點擊閱讀原文查看demo），你也能夠在 pc 瀏覽器查看 demo，效果相似手機默認系統消息提示