Notification 瀏覽器的消息推送

時間 2019-11-24

原文原文鏈接

Notification 對象，存在於window上，能夠生成一個通知對象以推送推送瀏覽器消息通知。html

這玩意兼容性不咋地，實不實用看場景。對外用戶的應用，天然是雞肋功能，由於你沒法知道用戶使用的是哪家哪版本的瀏覽器；對內部系統的幫助則是很大，內部員工使用的瀏覽器是可控的，爲了實現更大的工做效率，該功能可用於好比站內消息、跟蹤事務狀態變化等的通知，而且，這玩意只要不關閉通知所在的網頁，即便瀏覽器活動標籤不是這個網頁，依然能夠彈出通知，這樣就能夠在作其餘工做的同時及時收到須要的消息了。java

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

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

進入正文。chrome

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

1. maxActions，這個屬性值爲2，表示支持的最大的actions數量(actions見下文)。瀏覽器

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

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，消息通知的語言，值參考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"
*/