Desktop Notification也稱為Web Notification，是在Web頁面之外，以彈出桌面對話方塊的形式通知使用者發生了某事件。Web Notification於2015.9.10成為W3C推薦標準，網址https://www.w3.org/TR/notifications/。每個通知對話方塊都包括title, direction, language和origin。通知對話方塊還可以有body, tag, icon URL和icon image。
通知必須獲得使用者的授權才能夠顯示，從而避免非使用者期望的通知干擾使用者。對通知的授權有三種，分別由字串”default”（使用者未顯式授權，同denied）, ”denied”, ”granted”表示。
由於通知的顯示與瀏覽器的實現有關，與使用者的授權有關，所以在使用桌面通知之前，往往要檢查瀏覽器和使用者的授權，示例如下：
function checkNotification(){
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// check whether notification permissions have alredy been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
new Notification("Granted!");
}
// Otherwise, ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
new Notification("Request granted!");
}
});
}
}
Chrome瀏覽器的chrome.notifications.* API能夠基於模板建立桌面通知，並在作業系統右下角的托盤中顯示通知。
要在Chrome瀏覽器擴充套件中使用通知，首先要在manifest.json檔案中宣告notifications的許可權如下：
{
"permissions": [
"notifications"
],
}
chrome.notifications.TemplateType是列舉型別，列舉值如下：
|
列舉值 |
註釋 |
|
"basic" |
預設模板 icon, title, message, expandedMessage位於兩個button之上 |
|
"image" |
icon, title, message, expandedMessage, image位於兩個button之上 |
|
"list" |
icon, title, message, items位於兩個button之上 |
|
"progress" |
icon, title, message, progress位於兩個button之上 |
chrome.notifications. PermissionLevel是列舉型別，列舉值如下：
|
列舉值 |
註釋 |
|
"granted" |
預設值，使用者授權顯示通知 |
|
"denied" |
使用者未授權顯示通知 |
chrome.notifications.NotificationOptions物件的屬性如下：
|
屬性名 |
型別 |
必選/可選 |
註釋 |
|
type |
TemplateType |
可選 |
通知的型別， chrome.notifications.create()建立通知時必選 |
|
title |
string |
可選 |
通知的標題， chrome.notifications.create()建立通知時必選 |
|
message |
string |
可選 |
通知的主體內容， chrome.notifications.create()建立通知時必選 |
|
contextMessage |
string |
可選 |
通知的備選內容 |
|
buttons |
array of object |
可選 |
該陣列最多2個元素，分別代表2個button。 每個button物件都有title和iconUrl兩個屬性（string型別），其中iconUrl屬性可選 |
|
appIconMaskUrl |
string |
可選 |
應用圖示URL的掩碼，用以規範URL |
|
iconUrl |
string |
可選 |
圖示的URL |
|
imageUrl |
string |
可選 |
"image"型別的通知的圖片的URL |
|
priority |
integer |
可選 |
優先順序，有效範圍[-2,2]，預設0 |
|
eventTime |
double |
可選 |
通知的時間戳，單位ms |
|
items |
array of object |
可選 |
該陣列中的每個元素代表一個通知。 每個通知物件都有title和message兩個屬性（string型別） |
|
progress |
integer |
可選 |
當前的進度，有效範圍[0,100] |
|
isClickable |
boolean |
可選 |
通知視窗是否響應點選事件 |
chrome.notifications API中的常用方法：
· 建立並顯示通知
chrome.notifications.create(
string notificationId,
NotificationOptions options,
function(string notificationId) {...}
)
其中屬性說明如下：
|
屬性名 |
型別 |
必選/可選 |
註釋 |
|
notificationId |
string |
可選 |
通知的識別符號。 如果未設定或設定為””，則自動生成唯一識別符號； 如果設定的值與已有的通知相同，則替換已有的通知 |
|
options |
NotificationOptions |
必選 |
通知的具體內容 |
· 更新已有的通知
chrome.notifications.update(
string notificationId,
NotificationOptions options,
function (boolean wasUpdated) {...}
)
其中屬性與create()類似。
· 清除指定的通知
chrome.notifications.clear(string notificationId, function(boolean wasCleared) {...})
· 獲取所有通知
chrome.notifications.getAll(function(object notifications) {...})
最後介紹Chrome擴充套件中background與notification之間的互操作問題。
在處理通知的JavaScript指令碼檔案中，可以訪問background頁面的方法如下：
chrome.extension.getBackgroundPage().doThing();
在background頁面的JavaScript指令碼檔案中，可以訪問通知的JavaScript指令碼檔案中的方法如下：
chrome.extension.getViews({type:"notification"}).forEach(function(notificationWindow) {
notificationWindow.doOtherThing();
});