传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：通知是显示在浏览器中的，当浏览器最小化或者切换到B页面之后，是无法看到A页面的通知的，也就是说这种方式的消息推送它是基于页面存活的。 有鉴于此，HTML5推出了桌面通知功能。顾名思义，这个通知看起来就跟其他的桌面通知一样，比如QQ的弹窗。因为没有在浏览器中展示，所以看起来似乎与浏览器没有关系，但其是靠浏览器运行的。这就是Notification。
Notification特点
Notification有如下特点：
- 是否显示通知需要用户确认
- 通知页面即使不是当前激活页面，也可显示此页面的通知
- 通知是依附于浏览器的，浏览器关闭，通知也关闭
- 通知并非显示在浏览器右下角，而是现实在桌面的右下角，更像是C/S程序
判断浏览器是否支持
要想使用桌面通知，首先要判断浏览器是否支持
!!window.NotificationNotifycation是window下的一个对象，如果有此对象，则转换为布尔值之后为true
使用Notifycation
Notification对象提供了一些方法，用来创建通知、运行通知
requestPermission方法
执行此方法时，浏览器会提供一个选项信息，让用户选择是否允许此页面显示通知，如果用户选择“允许”，则显示通知，否则不显示。
可在此方法的回掉函数中判断用户的选择，并执行相应的代码。
需要注意的是，无论用户是否允许，都会执行回掉函数
notification.requestPermission(function(permission) {//code})
代码测试：
Notifycation的permission属性
Notification.permission属性有三个值，表示三种状态，我们就是根据此属性的值来判断用户的选择
- default：未设置过为这个状态，通过Notification.requestPermission()可以询问用户是否允许通知。如下图
- granted：用户点击允许后的状态
- denied[dɪ’naɪəd]： 用户点击拒绝后的状态，通知框不可用
代码测试：
创建通知
用户允许桌面通知后，就要构造桌面通知，看下面的代码
var mynotifi = new Notification("双十二，买买买", {
body: "双十二马上来了，你准备好剁手了吗？千万好货来袭",
icon: 'http://localhost/images/notification.png',
tag:1
});
构造通知需要Notification对象，此对象可以接受两个参数或者一个参数
第一个参数是通知的标题，显示在通知的正上方
第二个参数是通知的主体，使用{}括起来，使用键值对的方式表示信息，这些个参数是可选的
- body:通知的正文内容
- icon:通知显示的图标
- tag:通知框ID，相同id可替换，而不是出现新的通知框
关闭通知
close方法用于关闭通知。每个浏览器展现桌面通知的时间不一致，firefox的大概5秒，chrome要长一些，大概10秒，这是浏览器的默认时间，如果想随时关闭通知，除了用户点击通知右上角的关闭按钮(X)后，还可以在程序中调用close方法随时关闭
document.getElementById("btn1").onclick=function(){
mynotifi.close();
}
Notifycation事件
Notification具有一些事件，便于我们控制通知。
onshow
显示通知框时调用
mynotifycation.onshow=funcion(){//code}
调用此事件时和调用show方法一样，也会执行桌面通知，只不过show方法只是执行桌面通知，而onshow事件除了可以执行桌面通知之外，还可以执行此事件绑定的代码，比如控制桌面通知的显示时间，或者播放通知声音
mynotifi.onshow = function() {
var Music = new Audio("audios/open.mp3");
Music.play();
setTimeout(function() {
mynotifi.close();
}, 5000);
}
注意：不同的浏览器桌面通知的默认关闭事件不一样，上面已经说过，在设置关闭时间是，此时间值如果小于浏览器的默认时间，会有效果，但是如果大于默认关闭事件，则没有效果，仍然以默认关闭时间为准
onclick
点击通知框时调用，比如跳转到某个页面
mynotifi.onclick=function(){
window.location.href="http://www.daqitc.net";
}
onclose
点击通知框关闭按钮时调用，这个事件在桌面通知自动关闭是也会调用，比如播放声音
mynotifi.onclose=function(){
var music=new Audio("audios/close.mp3");
music.play();
}
onerror
发生错误时调用
完整DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>桌面通知</title>
<script type="text/javascript">
function showmsg() {
mynotify = new Notification("会议提醒", {
body: '刘洋：10点会议室开会 技术人员不用来',
icon: 'http://mufengjie.top/Public/Home/images/icon/bitbug_favicon.ico',
tag: 1
});
mynotify.onshow = function () {
setTimeout(function () {
mynotify.close();
}, 5000);
};
mynotify.onclick = function () {
window.location.href = "http://mufengjie.top/home/index/article/id/134.html";
};
mynotify.onclose = function () {
//可以在这里做一些有意义的事情，比如记录显示通知的次数
document.write('ss');
//alert('关闭了弹窗');
}
}
//判断浏览器是否支持桌面通知
if (window.Notification) {
var notification = window.Notification;
var mynotify;
setTimeout('showmsg()', 6000);
if (notification.permission == "granted") {
//创建通知
showmsg();
}
//判断许可状态
else if (notification.permission == "default") {
/*
如果用户从未设置过此网站的桌面提醒状态(可能是第一次访问这个网站，或者以前允许过，但是在通知-例外中删除掉了)，则调用requestPermission方法，让用户选择是否允许桌面提醒
*/
notification.requestPermission(function (permission) {
//在回掉函数中判断用户的选择,在这里不用为“拒绝”选项编写代码，因为既然拒绝，就什么都不做了，也不用为默认状态编写代码，因为既然已经弹出让用户选择的选项了，就没有所谓的默认状态了。所以只需要处理用户允许的状态就可以了
if (permission == "granted") {
//创建通知
showmsg();
}
});
}
}
</script>
</head>
<body>
</body>
</html>
