H5的Notification特性 - Web的桌面通知功能

本文發佈在個人博客H5的Notification特性 - Web的桌面通知功能
許可協議: 署名-非商業性使用-禁止演繹 4.0 國際 轉載請保留原文連接及做者。

---

目前，web網頁使用桌面通知功能的愈來愈多，包括微博，騰訊視頻等大廠站，桌面通知功能是H5的一個API - Notifications。它容許網頁或應用程序能夠發出通知，通知將被顯示在頁面以外的系統層面上（一般使用操做系統的標準通知機制，可是在不一樣的平臺和瀏覽器上的表現會有差別），這樣即便應用程序空閒或在後臺也能夠向用戶發送信息。

應用場景

Notifications的誕生簡化了網站或者應用與用戶之間的溝通成本（時間成本和開發成本），加強用戶黏性（減小了用戶離開應用的可能）。傳統的通知方式，大可能是經過站內信（消息），郵件，短信等方式，它們一般須要刷新（跳轉）頁面、離開應用打開其餘應用或終端來查看消息；而桌面通知功能大大的簡化了這個過程，消息的傳遞基本不消耗時間（若是不設置setTimeout，用時基本不會超過1s），而且用戶不須要離開應用，這都帶來了極大的方便。能夠預見，Notifications將會在不少網頁或應用中被大量使用。固然Notifications也具備它的侷限性：沒法存檔、即看即毀
那麼，這個功能到底能用在哪些場景呢？只能說能應用的場景不少：

• 社交類網站

• 資訊類網站

• 網頁版郵件服務

• 即時通知類網站

• ...

舉個例子，當你打開微博頁面，你可能會看到（使用新版瀏覽器）以下圖的通知：

這就是網站使用了桌面通知功能，當你選擇容許，那麼當網站有推送消息或者你登錄帳號有新的消息將會在桌面的右下角出現一個小彈窗通知，以下：

感受有點酷酷的！！！

用戶權限 - Notification.permission

Notification.permission是一個靜態方法，能夠獲取用戶當前的通知權限狀態，返回一個String，能夠根據返回值判斷用戶是否授予了通知權限。返回值有三種狀況：

• default

  • 用戶還未被詢問是否受權，因此通知不會被顯示。

• granted

  • 表示以前已經詢問過用戶，而且用戶已經授予了顯示通知的權限。

• denied

  • 用戶已經明確的拒絕了顯示通知的權限。

當值爲default或者denied時都不會顯示通知消息，只有明確的被設置成granted纔會顯示通知消息

const permission = Notification.permission;
if(permission === 'granted'){
    console.log('已經受權通知，能夠進行你的通知啦！');
}else{
    console.log('用戶還未受權，請先受權！');
}

請求權限 - Notification.requestPermission(CALLBACK)

應用發送通知以前必需要取得發送通知的權限，才能成功進行通知。Notification.requestPermission(CALLBACK)是請求獲取權限的方法（有點相似javascript的confirm彈窗窗），容許傳入一個回調，回調會返回用戶選擇的何種權限，返回兩個值，granted表明容許，denied表明拒絕。而且Notification.requestPermission()支持then方式的鏈式調用，也就意味着能夠異步調用它。

Notification.requestPermission(function (permission) {
    console.log('用戶是否容許通知： ',permission === 'granted' ? '容許' : '拒絕');
});
//兩種方式是等價的
Notification.requestPermission().then(function (permission) {
    console.log('用戶是否容許通知： ',permission === 'granted' ? '容許' : '拒絕');
});

建立通知 - new Notification(TITLE, OPTIONS)

new Notification(TITLE, OPTIONS)方法建立能夠建立一個通知實例，容許參入參數兩個參數TITLE和OPTIONS。注意默認狀況下（實際能夠經過OPTIONS中的timestamp參數控制）一旦通知實例被建立出來，它會當即被顯示出來。

TITLE參數

TITLE表示通知的標題。必須參數，容許數字、字符串和空

OPTIONS參數

OPTIONS是非必須參數，必須爲一個對象，它包含：
ps: 部分參數在某些瀏覽器可能會不生效，建議使用最新版的谷歌瀏覽器。如下某些內容從Notification-MDN-EN結合谷歌翻譯得來，頗有可能翻譯不許確，若有，請提出。

{
    //通知顯示正文。非必須，默認爲空
    body: '你的好友XX上線了！',
    //通知顯示正文的圖片地址。非必須，默認爲空
    image: 'imgae url',
    //通知左側圖標。非必須，默認爲空
    icon: 'imgae url',
    //通知的分類標記（ID）。非必須，默認爲空
    tag: 'test',
    //通知相關聯的數據，一般用於方法的回調，傳參。非必須，默認爲空
    data: '能夠是任意數據類型',
    //通知顯示延遲的時間。非必須，默認通知實例建立完成就顯示
    timestamp: '',
    //通知主體內容的水平展現順序，有點相似direction屬性。非必須，默認值是auto, 能夠是ltr或rtl
    dir: 'auto',
    //當沒有足夠的空間來顯示通知自己時，用於表示通知的圖像的URL。非必須，默認爲空
    badge: 'xxx',
    //通知的語言。非必須默認爲空
    lang: '',
    //通知顯示時，設備的振動模式。非必須，默認爲空
    vibrate: [200, 100, 200],
    //新通知出現是否覆蓋舊的通知，覆蓋（true）則永遠只顯示一條通知，不覆蓋（false）則會多條通知重疊。非必須，默認爲true
    renotify: true,
    //通知是否靜音。非必須，默認爲false，表示無聲
    silent: false,
    //通知聲源文件地址。非必須，默認爲空
    sound: 'mp3',
    //是否不在屏幕上顯示通知信息。非必須，默認爲false表示要顯示
    noscreen: false,
    //指定通知是否應該粘滯性，即不容易被用戶清理。非必須，默認false表示不具粘滯性
    sticky: false,
    //指定通知是否保持活性，知道用戶點擊或關閉。非必須，默認爲false
    requireInteraction: false
}

事件及事件鉤子

當通知被建立成功後：

• 通知實例具備一個靜態方法能夠用來關閉通知

• 通知實例具備四個事件鉤子，來跟蹤通知當前的狀態。這些事件能夠經過事件處理跟蹤onshow、onclick、onclose和onerror。由於Notification一樣繼承自EventTarget，所以能夠對它調用addEventListener()方法。

const n = new Notification('XX網站消息通知', {
    body: '你的朋友有新狀態啦，快去圍觀吧！',
    tag: '2ue',
    icon: 'https://2ue.github.io/images/common/avatar.png',
    data: {
        url: 'https://2ue.github.io'
    },
    timestamp: 3000
});

n.onshow = function () {
    console.log('通知顯示了！');
}
n.onclick = function (e) {
    //能夠直接經過實例的方式獲取data內自定義的數據
    //也能夠經過訪問回調參數e來獲取data的數據
    window.open(n.data.url, '_blank');
    n.close();
}
n.onclose = function () {
    console.log('你牆壁了我！！！');
}
n.onerror = function (err) {
    console.log('出錯了，小夥子在檢查一下吧');
    throw err;
}

demo

寫一個簡單的例子，能夠打開頁面體驗一下，建議用最新版谷歌瀏覽器打開~ Notification.js

const NotificationInstance = Notification || window.Notification;
if (!!NotificationInstance) {
    const permissionNow = NotificationInstance.permission;
    if (permissionNow === 'granted') {//容許通知
        CreatNotification();
    } else if (permissionNow === 'denied') {
        console.log('用戶拒絕了你!!!');
    } else {
        setPermission();
    }
    function setPermission() {
        //請求獲取通知權限
        NotificationInstance.requestPermission(function (PERMISSION) {
            if (PERMISSION === 'granted') {
                CreatNotification();
            } else {
                console.log('用戶無情殘忍的拒絕了你!!!');
            }
        });
    }
    function CreatNotification() {
        const n = new NotificationInstance('XX網站消息通知', {
            body: '你的朋友有新狀態啦，快去圍觀吧！',
            tag: '2ue',
            icon: 'https://2ue.github.io/images/common/avatar.png',
            data: {
                url: 'https://2ue.github.io'
            }
        });
        n.onshow = function () {
            console.log('通知顯示了！');
        }
        n.onclick = function (e) {
            //能夠直接經過實例的方式獲取data內自定義的數據
            //也能夠經過訪問回調參數e來獲取data的數據
            window.open(n.data.url, '_blank');
            n.close();
        }
        n.onclose = function () {
            console.log('你牆壁了我！！！');
        }
        n.onerror = function (err) {
            console.log('出錯了，小夥子在檢查一下吧');
            throw err;
        }
        setTimeout(() => {
            n.close();
        }, 2000);
    }
}

兼容

Notifications是H5的新特性，毫無疑問，它的兼容確定是一篇哀嚎.

參考

• Notification-MDN-EN

• Notification-MDN-CN