JavaScript Web Notifications API

目錄

Notification API是瀏覽器的通知接口，用于在用戶的桌面（而不是網(wǎng)頁(yè)上）顯示通知信息，桌面電腦和手機(jī)都適用，比如通知用戶收到了一封Email。具體的實(shí)現(xiàn)形式由瀏覽器自行部署，對(duì)于手機(jī)來(lái)說，一般顯示在頂部的通知欄。

如果網(wǎng)頁(yè)代碼調(diào)用這個(gè)API，瀏覽器會(huì)詢問用戶是否接受。只有在用戶同意的情況下，通知信息才會(huì)顯示。

下面的代碼用于檢查瀏覽器是否支持這個(gè)API。

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

目前，Chrome和Firefox在桌面端部署了這個(gè)API，F(xiàn)irefox和Blackberry在手機(jī)端部署了這個(gè)API。

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

上面代碼檢查當(dāng)前瀏覽器是否支持Notification對(duì)象，并且當(dāng)前用戶準(zhǔn)許使用該對(duì)象，然后調(diào)用Notification.requestPermission方法，向用戶彈出一條通知。

Notification.permission

Notification.permission屬性，用于讀取用戶給予的權(quán)限，它是一個(gè)只讀屬性，它有三種狀態(tài)。

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

Notification.requestPermission()

Notification.requestPermission方法用于讓用戶做出選擇，到底是否接收通知。它的參數(shù)是一個(gè)回調(diào)函數(shù)，該函數(shù)可以接收用戶授權(quán)狀態(tài)作為參數(shù)。

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

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

Notification構(gòu)造函數(shù)

Notification對(duì)象作為構(gòu)造函數(shù)使用時(shí)，用來(lái)生成一條通知。

var notification = new Notification(title, options);

Notification構(gòu)造函數(shù)的title屬性是必須的，用來(lái)指定通知的標(biāo)題，格式為字符串。options屬性是可選的，格式為一個(gè)對(duì)象，用來(lái)設(shè)定各種設(shè)置。該對(duì)象的屬性如下：

• dir：文字方向，可能的值為auto、ltr（從左到右）和rtl（從右到左），一般是繼承瀏覽器的設(shè)置。
• lang：使用的語(yǔ)種，比如en-US、zh-CN。
• body：通知內(nèi)容，格式為字符串，用來(lái)進(jìn)一步說明通知的目的。。
• tag：通知的ID，格式為字符串。一組相同tag的通知，不會(huì)同時(shí)顯示，只會(huì)在用戶關(guān)閉前一個(gè)通知后，在原位置顯示。
• icon：圖表的URL，用來(lái)顯示在通知上。

上面這些屬性，都是可讀寫的。

下面是一個(gè)生成Notification實(shí)例對(duì)象的例子。

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

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

實(shí)例對(duì)象的事件

Notification實(shí)例會(huì)觸發(fā)以下事件。

• show：通知顯示給用戶時(shí)觸發(fā)。
• click：用戶點(diǎn)擊通知時(shí)觸發(fā)。
• close：用戶關(guān)閉通知時(shí)觸發(fā)。
• error：通知出錯(cuò)時(shí)觸發(fā)（大多數(shù)發(fā)生在通知無(wú)法正確顯示時(shí)）。

這些事件有對(duì)應(yīng)的onshow、onclick、onclose、onerror方法，用來(lái)指定相應(yīng)的回調(diào)函數(shù)。addEventListener方法也可以用來(lái)為這些事件指定回調(diào)函數(shù)。

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

close方法

Notification實(shí)例的close方法用于關(guān)閉通知。

var n = new Notification("Hi!");

// 手動(dòng)關(guān)閉
n.close();

// 自動(dòng)關(guān)閉
n.onshow = function () { 
  setTimeout(n.close.bind(n), 5000); 
}

上面代碼說明，并不能從通知的close事件，判斷它是否為用戶手動(dòng)關(guān)閉。

• Aurelio De Rosa, An Introduction to the Web Notifications API
• MDN, Notification