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

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

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

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

社交類網(wǎng)站

資訊類網(wǎng)站

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

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

...

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

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

感覺有點酷酷的?。?！

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

default

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

granted

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

denied

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

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

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

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

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

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

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

OPTIONS是非必須參數(shù)，必須為一個對象，它包含：
ps: 部分參數(shù)在某些瀏覽器可能會不生效，建議使用最新版的谷歌瀏覽器。以下某些內(nèi)容從Notification-MDN-EN結(jié)合谷歌翻譯得來，很有可能翻譯不準(zhǔn)確，如有，請?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ù)類型",
    //通知顯示延遲的時間。非必須，默認(rèn)通知實例創(chuàng)建完成就顯示
    timestamp: "",
    //通知主體內(nèi)容的水平展示順序，有點類似direction屬性。非必須，默認(rèn)值是auto, 可以是ltr或rtl
    dir: "auto",
    //當(dāng)沒有足夠的空間來顯示通知本身時，用于表示通知的圖像的URL。非必須，默認(rèn)為空
    badge: "xxx",
    //通知的語言。非必須默認(rèn)為空
    lang: "",
    //通知顯示時，設(shè)備的振動模式。非必須，默認(rèn)為空
    vibrate: [200, 100, 200],
    //新通知出現(xiàn)是否覆蓋舊的通知，覆蓋（true）則永遠(yuǎn)只顯示一條通知，不覆蓋（false）則會多條通知重疊。非必須，默認(rèn)為true
    renotify: true,
    //通知是否靜音。非必須，默認(rèn)為false，表示無聲
    silent: false,
    //通知聲源文件地址。非必須，默認(rèn)為空
    sound: "mp3",
    //是否不在屏幕上顯示通知信息。非必須，默認(rèn)為false表示要顯示
    noscreen: false,
    //指定通知是否應(yīng)該粘滯性，即不容易被用戶清理。非必須，默認(rèn)false表示不具粘滯性
    sticky: false,
    //指定通知是否保持活性，知道用戶點擊或關(guān)閉。非必須，默認(rèn)為false
    requireInteraction: false
}

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

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

通知實例具有四個事件鉤子，來跟蹤通知當(dāng)前的狀態(tài)。這些事件可以通過事件處理跟蹤onshow、onclick、onclose和onerror。因為Notification同樣繼承自EventTarget，因此可以對它調(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) {
    //可以直接通過實例的方式獲取data內(nèi)自定義的數(shù)據(jù)
    //也可以通過訪問回調(diào)參數(shù)e來獲取data的數(shù)據(jù)
    window.open(n.data.url, "_blank");
    n.close();
}
n.onclose = function () {
    console.log("你墻壁了我?。?！");
}
n.onerror = function (err) {
    console.log("出錯了，小伙子在檢查一下吧");
    throw err;
}

寫一個簡單的例子，可以打開頁面體驗一下，建議用最新版谷歌瀏覽器打開~ 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() {
        //請求獲取通知權(quán)限
        NotificationInstance.requestPermission(function (PERMISSION) {
            if (PERMISSION === "granted") {
                CreatNotification();
            } else {
                console.log("用戶無情殘忍的拒絕了你!!!");
            }
        });
    }
    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) {
            //可以直接通過實例的方式獲取data內(nèi)自定義的數(shù)據(jù)
            //也可以通過訪問回調(diào)參數(shù)e來獲取data的數(shù)據(jù)
            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