Notification 瀏覽器的訊息推送

Notification · 發表 2018-12-05 19:32:00

摘要： Notification 物件，存在於window上，可以生成一個通知物件以推送推送瀏覽器訊息通知。這玩意相容性不咋地，實不實用看場景。對外使用者的應用，自然是雞肋功能，因為你無法知道使用者使用的是哪家哪版本的瀏覽器；對內部系統的幫助則是很大，內部員工使用的瀏覽器是可控的，為了實現更大的...

Notification 物件，存在於window上，可以生成一個通知物件以推送推送瀏覽器訊息通知。

這玩意相容性不咋地，實不實用看場景。對外使用者的應用，自然是雞肋功能，因為你無法知道使用者使用的是哪家哪版本的瀏覽器；對內部系統的幫助則是很大，內部員工使用的瀏覽器是可控的，為了實現更大的工作效率，該功能可用於比如站內訊息、跟蹤事務狀態變化等的通知，並且，這玩意只要不關閉通知所在的網頁，即使瀏覽器活動標籤不是這個網頁，依然可以彈出通知，這樣就可以在做其他工作的同時及時收到需要的訊息了。

實現效果如圖(在Windows系統下，是在桌面右下側圖示欄上方彈出)：

對的，就是這個。 但是你聽我解釋..我真的沒有下過這個單...

進入正文。

Notification 是個建構函式，它上面有三個靜態成員：maxActions、permission、requestPermission。

1. maxActions，這個屬性值為2，表示支援的最大的actions數量(actions見下文)。

2. permission，這個屬性有三個值："granted"、"denied"、"default"，default 和 denied 效果一樣，表示使用者不允許該網站顯示通知，granted表示使用者允許該網站顯示通知。

3. requestPermission，通過呼叫這個方法，瀏覽器會彈出框來讓使用者確認是否允許訊息通知，該方法傳入一個回撥函式作為引數，使用者授權結果作為回撥函式的引數給到開發者；該方法返回一個Promise。

程式碼如下：

// 開啟chrome瀏覽器，開啟www.baidu.com，開啟控制檯，然後...
Notification.requestPermission(res =>{ console.log(res); });
/*
 * 返回值
 * Promise {<pending>}
 *__proto__: Promise
 *[[PromiseStatus]]: "resolved"
 *[[PromiseValue]]: "granted"
 *
 * 輸出值: granted 因為我點選了允許。
 */

Notification.permission
// 輸出: "granted"

Notification 建構函式需要2個引數：title，options。

1. title 是訊息的標題

2. options 訊息的配置資訊，含有值：

2.1. body，通知訊息的內容，只有Windows系統下Firefox可以顯示多行資料，其餘環境下只顯示單行。

2.2. icon，通知的圖示圖片地址。

2.3. lang，訊息通知的語言，值參考 ofollow,noindex">ISO 2 letter language codes

2.4. dir，文字排列方向，三個值：auto、ltr、rtl。只有Windows系統下Firefox瀏覽器支援...

2.5. image，當沒有足夠的空間顯示通知本身時，用於表示通知的影象的URL。只有Windows系統下Chrome支援...

2.6. tag，在建構函式的選項引數中指定的通知ID(如果有的話)，暫未研究出怎麼使用，也沒找到詳細的使用文件...

2.7. data，返回克隆後的訊息格式，暫未研究出怎麼使用，也沒找到詳細的使用文件...

2.8. actions，使用者操作行為的陣列，暫未研究出怎麼使用，也沒找到詳細的使用文件...

2.9. badge，當沒有足夠的空間顯示通知本身時，用於表示通知的影象的URL。然而測試過支援的瀏覽器，也沒有一個對於這個屬性做出反應...

2.10. vibrate，指定具有振動功能的裝置發出振動模式，然而在iphone手機上下載了幾個瀏覽器，都未成功彈出通知，所以該值結果還是未知...

2.11. requireInteraction，表示是否需要使用者手動關閉通知，預設false，然而即使設定為true，通知也有系統來控制，並不會一直處於活動狀態...

2.12. 還有幾個還在試驗階段的配置...

綜上所述，通過瀏覽器測試後(Firefox含Mac和Windows、Chrome含Mac和Windows、Safari)，通用的有效配置僅有3個：title，body，icon。

使用程式碼如下：

function createNotify(title,options) {

var PERMISSON_GRANTED = 'granted';
var PERMISSON_DENIED = 'denied';
var PERMISSON_DEFAULT = 'default';

if (Notification.permission === PERMISSON_GRANTED) {
notify(title,options);
} else {
Notification.requestPermission(function (res) {
if (res === PERMISSON_GRANTED) {
notify(title,options);
}
});
}

function notify($title,$options) {
var notification = new Notification($title, $options);
}
}

createNotify('測試通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'});

Notification 例項上有一些事件：onclick、onerror、onclose(文件表示是要刪除的方法)、onshow(文件表示是要刪除的方法)；一個方法：close；屬性：timestamp訊息的時間戳。

程式碼如下：

function createNotify(title,options) {
var PERMISSON_GRANTED = 'granted';
var PERMISSON_DENIED = 'denied';
var PERMISSON_DEFAULT = 'default';
if (Notification.permission === PERMISSON_GRANTED) {
notify(title,options);
} else {
Notification.requestPermission(function (res) {
if (res === PERMISSON_GRANTED) {
notify(title,options);
}
});
}

function notify($title,$options) {
var notification = new Notification($title, $options);
console.log(notification);
notification.onshow = function(event){ console.log('show : ',event); }
notification.onclose = function(event){ console.log('close : ',event); }
notification.onclick = function(event){ 
console.log('click : ',event);
notification.close();
}
}
}

createNotify('測試通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'});

/* 依次列印
 * show:Event Object(事件物件)，事件的type為"show"
 * click:Event Object(事件物件)，事件的type為"click"。點選訊息後訊息被關閉，跳到close事件。
 * close:Event Object(事件物件)，事件的type為"close"
*/

最後，它的相容性是這樣的...

最後，本地測試這玩意需要起個服務來訪問(可以用java或者nodejs隨便起個簡單的)，直接開啟html是無效的，估摸著是瀏覽器處理通知地址的時候所需依賴導致。

就這麼多，將就著用。

Notification 瀏覽器的訊息推送

您可能也會喜歡…