简单了解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：通知发生错误时触发
上方的小例子中有使用可看看。