簡單瞭解HTML5的消息通知(Web Notifications)

前些天瀏覽網站的時候突然跳出個通知的允許與禁止，覺得很有新穎還很有意思，決定學習一下

---

瞭解得知這個是HTML5的消息通知機制notification
首先感謝以下文章幫助我少走了很多彎路

mozilla學習網站

相信大家在看一些新聞，視頻類的網站時會跳出一些通知

通知

當授權後有時候會跳出推送的消息

通知消息

這些功能很多主流網站已經在使用了，是時候好好學上一波了。

其實很簡單，這玩意只需要對照notification這個接口即可。

在使用前查查是否是自己需要的，避免浪費時間

notifacation兼容性

想要了解怎麼使用，沒問題先把代碼複製跑一邊啥事都解決了。

// html
<button id="btn">點擊</button>

// js
        <script>
            window.onload = function() {
            //首先詢問用戶是否授權，只有授權後才能顯示  Notification.requestPermission()
                var btn = document.getElementById('btn');
                btn.addEventListener('click', function() {
                    var notification = new Notification("消息通知", {
                        noscreen: true,
                        dir: 'rtl',
                        body: '哈哈！酷！',
                        tag: '1',
                        icon: 'img/1.png',
                        renotify: true
                    })
                    var notification2 = new Notification("消息通知", {
                        noscreen: true,
                        dir: 'rtl',
                        body: '哈哈！酷！',
                        tag: '2',
                        icon: 'img/1.png',
                        renotify: true
                    })
                    var notification3 = new Notification("消息通知", {
                        noscreen: true,
                        dir: 'rtl',
                        body: '哈哈！酷！',
                        tag: '3',
                        icon: 'img/1.png',
                        renotify: true
                    })
                    
                    setInterval(function() {
                        notification.close()
                        console.log('關閉');
                    }, 5000)
                    notification.onclick = function() {
                        //                      alert('點擊了');
                        console.log('點擊了');
                        notification.close()
                    }
                    notification.onclose = function() {
                        //                      alert('已經關閉！');
                        console.log('已經關閉');
                    }
                    notification.onshow = function() {
                        //                      alert('彈出前！');
                        console.log('彈出前');
                    }
                })

            }
        </script>

以下幾個常用的API

//1.利用構造函數來創建一個實例
var notification = new Notification(title, options)

/*
title
一定會被顯示的通知標題
options 可選（常用，更多需要查api）
一個被允許用來設置通知的對象。它包含以下屬性：
dir : 文字的方向；它的值可以是 auto（自動）, ltr（從左到右）, or rtl（從右到左）
body: 通知中額外顯示的字符串
tag: 賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。
icon: 一個圖片的URL，將被用於顯示通知的圖標。
*/

如何判斷用戶是否同意呢

Notification.permission

授權狀態：denied (用戶拒絕了通知的顯示), granted (用戶允許了通知的顯示),默認 default (因爲不知道用戶的選擇，所以瀏覽器的行爲與 denied 時相同).

發出一個通知後想要讓其點擊有效果

onclick：點擊時觸發
onshow：顯示通知時觸發
onclose：關閉通知時觸發
onerror：通知發生錯誤時觸發
上方的小例子中有使用可看看。