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

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

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

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

社交類網站

資訊類網站

網頁版郵件服務

即時通知類網站

...

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

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

感覺有點酷酷的！！！

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

default

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

granted

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

denied

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

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

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

應用發送通知之前必須要取得發送通知的權限，才能成功進行通知。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)方法創建可以創建一個通知實例，允許參入參數兩個參數TITLE和OPTIONS。注意默認情況下（實際可以通過OPTIONS中的timestamp參數控制）一旦通知實例被創建出來，它會立即被顯示出來。

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

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;
}

寫一個簡單的例子，可以打開頁面體驗一下，建議用最新版谷歌瀏覽器打開~ 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