概述

Notification API是瀏覽器的通知介面，用於在使用者的桌面（而不是網頁上）顯示通知資訊，桌面電腦和手機都適用，比如通知使用者收到了一封Email，具體的實現形式由瀏覽器自行部署，對於手機來說，一般顯示在頂部的通知欄。

如果網頁程式碼呼叫這個API，瀏覽器會詢問使用者是否接受，只有在使用者同意的情況下，通知資訊才會顯示。

下面的程式碼用於檢查瀏覽器是否支援這個API。

if (window.Notification) {
  // 支援
} else {
  // 不支援
}

目前，Chrome 和 Firefox 在桌面端部署了這個API，Firefox和Blackberry在手機端部署了這個API。

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        var n = new Notification('通知標題', { body: '這裡是通知內容！' }); 
    });
}

上面程式碼檢查當前瀏覽器是否支援Notification物件，並且當前使用者准許使用該物件，然後呼叫Notification.requestPermission 方法，向用戶彈出一條通知。

Notification物件的屬性和方法

Notification.permission

Notification.permission屬性，用於讀取使用者給予的許可權，它是一個只讀屬性，它有三種狀態。

• default：使用者還沒有做出任何許可，因此不會彈出通知。
• granted：使用者明確同意接收通知。
• denied：使用者明確拒絕接收通知。

Notification.requestPermission()

Notification.requestPermission方法用於讓使用者做出選擇，到底是否接收通知。它的引數是一個回撥函式，該函式可以接收使用者授權狀態作為引數。

Notification.requestPermission(function (status) {
      if (status === "granted") {
           var n = new Notification("Hi!");
       } else {
            alert("Hi!");
       }
});

上面程式碼表示，如果使用者拒絕接收通知，可以用alert方法代替。

Notification例項物件

Notification建構函式

Notification物件作為建構函式使用時，用來生成一條通知。

var notification = new Notification(title, options);

Notification建構函式的title屬性是必須的，用來指定通知的標題，格式為字串。options屬性是可選的，格式為一個物件，用來設定各種設定。該物件的屬性如下：

• dir：文字方向，可能的值為auto、ltr（從左到右）和rtl（從右到左），一般是繼承瀏覽器的設定。
• lang：使用的語種，比如en-US、zh-CN。
• body：通知內容，格式為字串，用來進一步說明通知的目的。。
• tag：通知的ID，格式為字串。一組相同tag的通知，不會同時顯示，只會在使用者關閉前一個通知後，在原位置顯示。
• icon：圖表的URL，用來顯示在通知上。

上面這些屬性，都是可讀寫的。下面是一個生成Notification例項物件的例子。

var notification = new Notification('收到新郵件', {
  body: '您總共有3封未讀郵件。'
});

notification.title // "收到新郵件"
notification.body // "您總共有3封未讀郵件。"

例項物件的事件

Notification例項會觸發以下事件。

• show：通知顯示給使用者時觸發。
• click：使用者點選通知時觸發。
• close：使用者關閉通知時觸發。
• error：通知出錯時觸發（大多數發生在通知無法正確顯示時）。

這些事件有對應的onshow、onclick、onclose、onerror方法，用來指定相應的回撥函式。addEventListener方法也可以用來為這些事件指定回撥函式。

notification.onshow = function() {
     console.log('Notification shown');
};

close方法

Notification例項的close方法用於關閉通知。

var n = new Notification("Hi!");
// 手動關閉
n.close();
// 自動關閉
n.onshow = function () { 
     setTimeout(n.close.bind(n), 5000); 
}

上面程式碼說明，並不能從通知的close事件，判斷它是否為使用者手動關閉。

注意：

個人測試發現：該功能只有在伺服器釋出的頁面下才可以出效果，靜態頁面沒有任何效果也不報錯。