Notification 瀏覽器的消息推送

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，消息通知的語言，值參考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是無效的，估摸着是瀏覽器處理通知地址的時候所需依賴導致。

就這么多，將就着用。