Chrome瀏覽器擴展開發系列之十：桌面通知Notification

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();

});