简单了解HTML5的消息通知(Web Notifications)

前些天浏览网站的时候突然跳出个通知的允许与禁止，觉得很有新颖还很有意思，决定学习一下

---

了解得知这个是HTML5的消息通知机制notification
首先感谢以下文章帮助我少走了很多弯路

mozilla学习网站

相信大家在看一些新闻，视频类的网站时会跳出一些通知

通知

当授权后有时候会跳出推送的消息

通知消息

这些功能很多主流网站已经在使用了，是时候好好学上一波了。

其实很简单，这玩意只需要对照notification这个接口即可。

在使用前查查是否是自己需要的，避免浪费时间

notifacation兼容性

想要了解怎么使用，没问题先把代码复制跑一边啥事都解决了。

// html
点击

// js
        

以下几个常用的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：通知发生错误时触发
上方的小例子中有使用可看看。