原文：http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
需要注意的是，消息通知只有通過Web服務訪問該頁面時才會生效，如果直接雙擊打開本地文件，是沒有任何效果的。所以在平時做練習的時候也需要把文件目錄放進Web容器內，切記。
消息通知是個不錯的特性，可是也不排除有些站點惡意的使用這個功能，一旦用戶授權之后，不時的推送一些不太友好的消息，打擾用戶的工作，這個時候我們可以移除該站點的權限，禁用其消息通知功能。我們可以依次點擊設置打開設置的選項卡，然后點擊底部的顯示高級設置，在隱私一項中點擊內容設置，最后會彈出一個內容面板，向下滑動找到消息通知一項，如何更改，想必就不用多說了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <button id="button">有人想加你為好友</button> <p id="text"></p> </body> <script type="text/javascript"> if (window.Notification) { var button = document.getElementById('button'), text = document.getElementById('text'); var popNotice = function() { if (Notification.permission == "granted") { var notification = new Notification("Hi，帥哥：", { body: '可以加你為好友嗎？', icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' }); notification.onclick = function() { text.innerHTML = '張小姐已於' + new Date().toTimeString().split(' ')[0] + '加你為好友！'; notification.close(); }; } }; button.onclick = function() { if (Notification.permission == "granted") { popNotice(); } else if (Notification.permission != "denied") { Notification.requestPermission(function (permission) { popNotice(); }); } }; } else { alert('瀏覽器不支持Notification'); } </script> </html>
HTML5 Web Notification語法
window.Notification
如果瀏覽器支持Web Notification，不考慮私有前綴，則window.Notification就會是一個有很多靜態屬性和實例方法的函數。基本上，Web Notification所有的語法都是圍繞Notification這個函數來進行的。
顯然，通知這種事情是有可能擾民的，因此，必須經過用戶同意才行。因此：
1. Notification.requestPermission()
這是一個靜態方法，作用就是讓瀏覽器出現是否允許通知的提示，window系統Chrome瀏覽器目前的UI效果是這樣的：
語法目前有新舊兩種，下面這個是最近規范上更新的基於promise的語法：
Notification.requestPermission().then(function(permission) { ... });
下面這個是基於簡單的回調：
Notification.requestPermission(callback);
其中callback是可選參數，根據MDN的說法，Gecko 46開始舍棄了這種語法，但是，我自己使用FireFox 47測試，跑得很正常（有part4的截圖為證）。難道FireFox的版本號不等同於Gecko的版本號？
無論是then中的還是直接callback函數的參數都是一樣的，表示當前是否允許。只會是granted, denied, 或default.
其中granted表示用戶允許通知，denied表示用戶嫌棄你，default表示用戶目前還沒有管你。
Notification.requestPermission().then(function(result) {
// result可能是是granted, denied, 或default.
});
2. Notification.permission[只讀]
這是一個靜態屬性。表示是否允許通知，值就是上面的granted, denied, 或default.
默認情況下，Notification.permission的值是'default':
因此，Notification.requestPermission()的回調方法中，可以不使用result參數，直接使用Notification.permission獲取當前的通知狀態。
現在，用戶允許出通知了，我們也知道可以出通知了，下面剩下的就是顯示通知了。
3. new Notification(title, options)
通過new構造，顯示通知。其中title是必須參數，表示通知小框框的標題內容，options是可選參數，對象，支持的參數以及釋義見下表：
| 屬性名 | 釋義 |
|---|---|
| dir | 默認值是auto, 可以是ltr或rtl，有點類似direction屬性。表示提示主體內容的水平書寫順序。 |
| lang | 提示的語言。沒看出來有什么用。大家可以忽略之~ |
| body | 提示主體內容。字符串。會在標題的下面顯示。比方說上面的“好啊！(害羞.gif)”。 |
| tag | 字符串。標記當前通知的標簽。 |
| icon | 字符串。通知面板左側那個圖標地址。 |
| data | 任意類型和通知相關聯的數據。 |
| vibrate | 通知顯示時候，設備震動硬件需要的振動模式。所謂振動模式，指的是一個描述交替時間的數組，分別表示振動和不振動的毫秒數，一直交替下去。例如[200, 100, 200]表示設備振動200毫秒，然后停止100毫秒，再振動200毫秒。 |
| renotify | 布爾值。新通知出現的時候是否替換之前的。如果設為true，則表示替換，表示當前標記的通知只會出現一個。注意都這里“當前標記”沒？沒錯，true參數要想其作用，必須tag需要設置屬性值。然后，通知就會像這樣覆蓋：
而不會是默認的疊高樓：
|
| silent | 布爾值。通知出現的時候，是否要有聲音。默認false, 表示無聲。 |
| sound | 字符串。音頻地址。表示通知出現要播放的聲音資源。 |
| noscreen | 布爾值。是否不再屏幕上顯示通知信息。默認false, 表示要在屏幕上顯示通知內容。
|
| sticky | 布爾值。是否通知具有粘性，這樣用戶不太容易清除通知。默認false, 表示沒有粘性。根據我自己的猜測，應該和position的sticky屬性值類似。 |
4. Notification.close()
通知顯示了，如何關閉呢？可以通過調用Notification.close()實例方法，實際上，通知如果你放着不管，一段時間后就會自動隱藏，具體多久不詳，我估摸着5秒有的。
5. 事件句柄
Notification.onclick
點擊通知，然后……
Notification.onerror
通知顯示異常，然后。例如，明明Notification.permission是default，你還讓我顯示。
下面這些呢有必要獨立出來，雖然現在是支持挺好的，但是，由於目前規范並沒有把它們列入其中，所以，未來有可能瀏覽器就不支持了。
Notification.onclose
通知關閉了，然后…… 無論是用戶手動關閉，還是直接Notification.close()關閉都會觸發該該事件。
Notification.onshow
通知顯示的時候，該干嘛干嘛~~
6. 其他屬性值
除了Notification.permission外，Notification還有很多其他只讀屬性值，但是，基本上和上面的options參數一致，返回的值也是options和默認值的合並值（如果瀏覽器支持的話）。
Notification.title[只讀]
Notification.dir[只讀]
Notification.lang[只讀]
Notification.body[只讀]
Notification.tag[只讀]
Notification.icon[只讀]
Notification.data[只讀]
Notification.silent[只讀]
Notification.title[只讀]
Notification.timestamp[只讀]
通知創建或者可以使用的時間。
Notification.noscreen[只讀]
Notification.renotify[只讀]
Notification.sound[只讀]
Notification.sticky[只讀]
Notification.vibrate[只讀]
四、HTML5 Web Notification實例演示
知道了作用和API，下面就可以來個實例演示下，看看究竟真面目如何。
您可以狠狠地點擊這里：瀏覽器通知Web Notifications實例demo
點擊demo頁面按鈕：
如果你是第一次，會有如下提示：
通過后，就會出現妹子相關的通知信息了，例如，FireFox瀏覽器下（使用的是callback回調實現）：
此時，你瀏覽器最小化，或者頁面刷新，該通知都是紋風不動的。點擊通知，可以和頁面進行交互，例如，本demo顯示了一段文字：
核心代碼如下（顯示和點擊）：
if (Notification.permission == "granted") {
var notification = new Notification("Hi，帥哥：", {
body: '可以加你為好友嗎？',
icon: 'mm1.jpg'
});
notification.onclick = function() {
text.innerHTML = '張小姐已於' + new Date().toTimeString().split(' ')[0] + '加你為好友！';
notification.close();
};
}