摘要：返回值有三種情況用戶還未被詢問(wèn)是否授權(quán)，所以通知不會(huì)被顯示。用戶已經(jīng)明確的拒絕了顯示通知的權(quán)限。非必須，默認(rèn)為表示要顯示指定通知是否應(yīng)該粘滯性，即不容易被用戶清理。

本文發(fā)布在我的博客H5的Notification特性 - Web的桌面通知功能
許可協(xié)議: 署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際    轉(zhuǎn)載請(qǐng)保留原文鏈接及作者。

目前，web網(wǎng)頁(yè)使用桌面通知功能的越來(lái)越多，包括微博，騰訊視頻等大廠站，桌面通知功能是H5的一個(gè)API - Notifications。它允許網(wǎng)頁(yè)或應(yīng)用程序可以發(fā)出通知，通知將被顯示在頁(yè)面之外的系統(tǒng)層面上（通常使用操作系統(tǒng)的標(biāo)準(zhǔn)通知機(jī)制，但是在不同的平臺(tái)和瀏覽器上的表現(xiàn)會(huì)有差異），這樣即使應(yīng)用程序空閑或在后臺(tái)也可以向用戶發(fā)送信息。

Notifications的誕生簡(jiǎn)化了網(wǎng)站或者應(yīng)用與用戶之間的溝通成本（時(shí)間成本和開發(fā)成本），增強(qiáng)用戶黏性（減少了用戶離開應(yīng)用的可能）。傳統(tǒng)的通知方式，大多是通過(guò)站內(nèi)信（消息），郵件，短信等方式，它們通常需要刷新（跳轉(zhuǎn)）頁(yè)面、離開應(yīng)用打開其他應(yīng)用或終端來(lái)查看消息；而桌面通知功能大大的簡(jiǎn)化了這個(gè)過(guò)程，消息的傳遞基本不消耗時(shí)間（如果不設(shè)置setTimeout，用時(shí)基本不會(huì)超過(guò)1s），并且用戶不需要離開應(yīng)用，這都帶來(lái)了極大的方便。可以預(yù)見，Notifications將會(huì)在很多網(wǎng)頁(yè)或應(yīng)用中被大量使用。當(dāng)然Notifications也具有它的局限性：無(wú)法存檔、即看即毀
那么，這個(gè)功能到底能用在哪些場(chǎng)景呢？只能說(shuō)能應(yīng)用的場(chǎng)景很多：

社交類網(wǎng)站

資訊類網(wǎng)站

網(wǎng)頁(yè)版郵件服務(wù)

即時(shí)通知類網(wǎng)站

...

舉個(gè)例子，當(dāng)你打開微博頁(yè)面，你可能會(huì)看到（使用新版瀏覽器）如下圖的通知：

這就是網(wǎng)站使用了桌面通知功能，當(dāng)你選擇允許，那么當(dāng)網(wǎng)站有推送消息或者你登陸賬號(hào)有新的消息將會(huì)在桌面的右下角出現(xiàn)一個(gè)小彈窗通知，如下：

感覺有點(diǎn)酷酷的！！！

Notification.permission是一個(gè)靜態(tài)方法，可以獲取用戶當(dāng)前的通知權(quán)限狀態(tài)，返回一個(gè)String，可以根據(jù)返回值判斷用戶是否授予了通知權(quán)限。返回值有三種情況：

default

用戶還未被詢問(wèn)是否授權(quán)，所以通知不會(huì)被顯示。

granted

表示之前已經(jīng)詢問(wèn)過(guò)用戶，并且用戶已經(jīng)授予了顯示通知的權(quán)限。

denied

用戶已經(jīng)明確的拒絕了顯示通知的權(quán)限。

當(dāng)值為default或者denied時(shí)都不會(huì)顯示通知消息，只有明確的被設(shè)置成granted才會(huì)顯示通知消息

const permission = Notification.permission;
if(permission === "granted"){
    console.log("已經(jīng)授權(quán)通知，可以進(jìn)行你的通知啦！");
}else{
    console.log("用戶還未授權(quán)，請(qǐng)先授權(quán)！");
}

應(yīng)用發(fā)送通知之前必須要取得發(fā)送通知的權(quán)限，才能成功進(jìn)行通知。Notification.requestPermission(CALLBACK)是請(qǐng)求獲取權(quán)限的方法（有點(diǎn)類似javascript的confirm彈窗窗），允許傳入一個(gè)回調(diào)，回調(diào)會(huì)返回用戶選擇的何種權(quán)限，返回兩個(gè)值，granted代表允許，denied代表拒絕。并且Notification.requestPermission()支持then方式的鏈?zhǔn)秸{(diào)用，也就意味著可以異步調(diào)用它。

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

new Notification(TITLE, OPTIONS)方法創(chuàng)建可以創(chuàng)建一個(gè)通知實(shí)例，允許參入?yún)?shù)兩個(gè)參數(shù)TITLE和OPTIONS。注意默認(rèn)情況下（實(shí)際可以通過(guò)OPTIONS中的timestamp參數(shù)控制）一旦通知實(shí)例被創(chuàng)建出來(lái)，它會(huì)立即被顯示出來(lái)。

TITLE表示通知的標(biāo)題。必須參數(shù)，允許數(shù)字、字符串和空

OPTIONS是非必須參數(shù)，必須為一個(gè)對(duì)象，它包含：
ps: 部分參數(shù)在某些瀏覽器可能會(huì)不生效，建議使用最新版的谷歌瀏覽器。以下某些內(nèi)容從Notification-MDN-EN結(jié)合谷歌翻譯得來(lái)，很有可能翻譯不準(zhǔn)確，如有，請(qǐng)?zhí)岢觥?/p>

{
    //通知顯示正文。非必須，默認(rèn)為空
    body: "你的好友XX上線了！",
    //通知顯示正文的圖片地址。非必須，默認(rèn)為空
    image: "imgae url",
    //通知左側(cè)圖標(biāo)。非必須，默認(rèn)為空
    icon: "imgae url",
    //通知的分類標(biāo)記（ID）。非必須，默認(rèn)為空
    tag: "test",
    //通知相關(guān)聯(lián)的數(shù)據(jù)，通常用于方法的回調(diào)，傳參。非必須，默認(rèn)為空
    data: "可以是任意數(shù)據(jù)類型",
    //通知顯示延遲的時(shí)間。非必須，默認(rèn)通知實(shí)例創(chuàng)建完成就顯示
    timestamp: "",
    //通知主體內(nèi)容的水平展示順序，有點(diǎn)類似direction屬性。非必須，默認(rèn)值是auto, 可以是ltr或rtl
    dir: "auto",
    //當(dāng)沒有足夠的空間來(lái)顯示通知本身時(shí)，用于表示通知的圖像的URL。非必須，默認(rèn)為空
    badge: "xxx",
    //通知的語(yǔ)言。非必須默認(rèn)為空
    lang: "",
    //通知顯示時(shí)，設(shè)備的振動(dòng)模式。非必須，默認(rèn)為空
    vibrate: [200, 100, 200],
    //新通知出現(xiàn)是否覆蓋舊的通知，覆蓋（true）則永遠(yuǎn)只顯示一條通知，不覆蓋（false）則會(huì)多條通知重疊。非必須，默認(rèn)為true
    renotify: true,
    //通知是否靜音。非必須，默認(rèn)為false，表示無(wú)聲
    silent: false,
    //通知聲源文件地址。非必須，默認(rèn)為空
    sound: "mp3",
    //是否不在屏幕上顯示通知信息。非必須，默認(rèn)為false表示要顯示
    noscreen: false,
    //指定通知是否應(yīng)該粘滯性，即不容易被用戶清理。非必須，默認(rèn)false表示不具粘滯性
    sticky: false,
    //指定通知是否保持活性，知道用戶點(diǎn)擊或關(guān)閉。非必須，默認(rèn)為false
    requireInteraction: false
}

當(dāng)通知被創(chuàng)建成功后：

通知實(shí)例具有一個(gè)靜態(tài)方法可以用來(lái)關(guān)閉通知

通知實(shí)例具有四個(gè)事件鉤子，來(lái)跟蹤通知當(dāng)前的狀態(tài)。這些事件可以通過(guò)事件處理跟蹤onshow、onclick、onclose和onerror。因?yàn)?b>Notification同樣繼承自EventTarget，因此可以對(duì)它調(diào)用addEventListener()方法。

const n = new Notification("XX網(wǎng)站消息通知", {
    body: "你的朋友有新狀態(tài)啦，快去圍觀吧！",
    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) {
    //可以直接通過(guò)實(shí)例的方式獲取data內(nèi)自定義的數(shù)據(jù)
    //也可以通過(guò)訪問(wèn)回調(diào)參數(shù)e來(lái)獲取data的數(shù)據(jù)
    window.open(n.data.url, "_blank");
    n.close();
}
n.onclose = function () {
    console.log("你墻壁了我！！！");
}
n.onerror = function (err) {
    console.log("出錯(cuò)了，小伙子在檢查一下吧");
    throw err;
}

寫一個(gè)簡(jiǎn)單的例子，可以打開頁(yè)面體驗(yàn)一下，建議用最新版谷歌瀏覽器打開~ 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() {
        //請(qǐng)求獲取通知權(quán)限
        NotificationInstance.requestPermission(function (PERMISSION) {
            if (PERMISSION === "granted") {
                CreatNotification();
            } else {
                console.log("用戶無(wú)情殘忍的拒絕了你!!!");
            }
        });
    }
    function CreatNotification() {
        const n = new NotificationInstance("XX網(wǎng)站消息通知", {
            body: "你的朋友有新狀態(tài)啦，快去圍觀吧！",
            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) {
            //可以直接通過(guò)實(shí)例的方式獲取data內(nèi)自定義的數(shù)據(jù)
            //也可以通過(guò)訪問(wèn)回調(diào)參數(shù)e來(lái)獲取data的數(shù)據(jù)
            window.open(n.data.url, "_blank");
            n.close();
        }
        n.onclose = function () {
            console.log("你墻壁了我！！！");
        }
        n.onerror = function (err) {
            console.log("出錯(cuò)了，小伙子在檢查一下吧");
            throw err;
        }
        setTimeout(() => {
            n.close();
        }, 2000);
    }
}

Notifications是H5的新特性，毫無(wú)疑問(wèn)，它的兼容肯定是一篇哀嚎.

Notification-MDN-EN

Notification-MDN-CN