HTML5 Notification消息通知

Notification 对象用来为用户设置和显示桌面通知，Web Notifications API 可以将通知发送至页面之外的系统层级上，因此，即便应用处于空闲状态或是在后台，web 应用仍然可以通过这个 API 向用户发送信息。比如网页版微信，每当用户收到一条新的消息，就会有一条通知显示给用户
用法

var notification = new Notification(title, [options])

复制代码

参数
ParamTypeDescriptiontitle

string

复制代码

显示的通知标题[options]

object

复制代码

显示通知的配置项，可选[options.dir]

string

复制代码

文字方向，取值为 auto、ltr、rtl 之一[options.lang]

string

复制代码

通知的语言，这个字符串必须在 BCP 47 language tag 文档中是有效的。[options.body]

string

复制代码

通知的内容[options.tag]

string

复制代码

通知的 id，通过此 id 可以对通知进行刷新、替换或移除[options.icon]

string

复制代码

通知的图标图片URL，将被用于显示通知的图标。请求权限要显示通知，需要得到用户的授权，Notification 提供了 requestPermission 方法向用户申请显示通知的权限，此方法只能被用户行为调用（比如在onclick 事件中）

Notification.requestPermission(function(permission) {

复制代码

if (permission === "granted") {

复制代码

console.log(11)

复制代码

popNotice()

复制代码

}

复制代码

});

复制代码

权限状态只读属性 Notification.permission 可以用来获取用户授权状态

denied ：拒绝通知显示
granted ：允许通知显示
default ：用户尚未被询问是否授权，在浏览器中表现与 denied 相同

事件处理 Notification 实例上的事件监听

onshow/ondisplay : 在通知显示的时触发
onclick : 当用户点击通知时触发
onerror : 当通知出现错误时触发
onclose ：当用户关闭通知时触发

Example

Hello

复制代码

[/code]
[code]var button = document.querySelector('.button')

复制代码

button.addEventListener('click', function() {

复制代码

if (!("Notification" in window)) {

复制代码

alert("不支持 notification");

复制代码

} else if (Notification.permission === "granted") { // 允许通知

复制代码

notice()

复制代码

}else if (Notification.permission !== 'denied') { // 用户没有选择是否显示通知，向用户请求许可

复制代码

Notification.requestPermission(function(permission) {

复制代码

if (permission === "granted") {

复制代码

notice()

复制代码

}

复制代码

});

复制代码

}

复制代码

}, false)

复制代码

function notice() {

复制代码

var notification = new Notification("你好，JavaScript",{

复制代码

body:'微信订阅号',

复制代码

icon:"https://mp.weixin.qq.com/misc/getheadimg?token=990524500&fakeid=3006291623&r=674680"

复制代码

});

复制代码

notification.onclick = function(){

复制代码

notification.close()

复制代码

}

复制代码

}

复制代码

[code][/code]
浏览器支持

Firefox 22+
Cheome 22+
Safari 6+
Opera 25+
Edge 14+

pc端基本支持（忘掉IE吧），移动端，在ios safari 上暂不支持，androd 4.4+ browser需要添加 webkit 前缀，上月24号发布的Firefox 51 for android 已经支持消息通知，安卓用户可以下载最新的Firefox浏览器在手机端体验（点击阅读原文查看demo），你也可以在 pc 浏览器查看 demo
效果如下