瀏覽器通知

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');    
}

使用簡單，易懂。

如下是api

屬性名	釋義
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^[只讀]