HTML5中的WebNotification桌⾯通知
⼤家在做⼀些浏览器端的聊天功能的时候，或者在⼀些⽹站跟咨询的时候，会看到⼀些消息通知的提⽰，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这⾥简单的介绍⼀下如何实现这样的功能。
需要购买阿⾥云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后⼀个⽉内有效：
1、实现标签页闪烁效果
实现的效果：
  当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停⽌闪动。
  注意：这⾥需要⽤到窗⼝的获取焦点和失去焦点的⽅法，由于IE和其他Chrome及FireFox的区别，这⾥需要⽤到的⽅法就不⼀样，具体是：
  Chrome和FireFox浏览器是window的onfocus, onblur⽅法；⽽IE浏览器则是document的onfocusin, onfocusout⽅法
下⾯是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签页标题闪烁</title>
</head>
<body>
<h2>浏览器窗体获得焦点则停⽌标题闪烁通知+失去焦点则开启标题闪烁通知</h2>
<script>
//    窗体失焦的时候，标题就会闪。
//    这⾥有⼀个⼩的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是windo
w的onfocus, onblur⽅法；⽽IE浏览器则是document的onfocusin, onfocusout⽅法，因此有：var titleInit = document.title, isShine = true;
setInterval(function() {
var title = document.title;
if (isShine == true) {
if (/新/.test(title) == false) {
document.title = '【你有新消息】';
} else {
document.title = '【    　】';
}
} else {
document.title = titleInit;
}
}, 500);
// for Chrome and FireFox
console.log(123);
isShine = false;
};
isShine = true;
};
// for IE
isShine = false;
};
isShine = true;
};
</script>
</body>
</html>
在浏览器打开该页⾯，再随意打开其他⼀个标签页，测试效果如下：
2、实现屏幕右侧消息通知
先直接贴出代码吧
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>测试消息通知</h2>
<script>
suportNotify()
}
//判断浏览器是否⽀持Web Notifications API
function suportNotify(){
if (window.Notification) {
// ⽀持
console.log("⽀持"+"Web Notifications API");
//如果⽀持Web Notifications API，再判断浏览器是否⽀持弹出实例
showMess()
} else {
// 不⽀持
alert("不⽀持 Web Notifications API");
}
}
//判断浏览器是否⽀持弹出实例
onblur和blur的区别
function showMess(){
setTimeout(function () {
console.log('1：'+Notification.permission);
//如果⽀持window.Notification 并且许可不是拒绝状态
if(window.Notification && Notification.permission !== "denied") {
//questPermission这是⼀个静态⽅法，作⽤就是让浏览器出现是否允许通知的提⽰
console.log('2: '+status);
//如果状态是同意
if (status === "granted") {
var m = new Notification('收到信息', {
body: '这⾥是通知内容！你想看什么客官？',  //消息体内容
icon:"images/img1.jpg"  //消息图⽚
});
window.focus();
}
} else{
alert('当前浏览器不⽀持弹出消息')
}
});
}
},1000)
}
</script>
</body>
</html>
点击了允许后，则当前域名的⽹站就被允许在该电脑上出现通知弹框，以⾕歌浏览器为例，这时依次点击：设置——⾼级——内容设置——通知，就可以在允许下⾯看到刚才点击了允许通知的站点的地址，如图：
此时，localhost:63342站点就可以出现通知消息了（消息通知弹窗在Mac和windows两个系统下可能出现的位置有些不⼀样，⾃⼰设置的logo出现的位置也会有些不同），Mac的消息通知窗⼝是从屏幕右上⾓出来的（Windows应该是从右下⾓出来），效果如图：
此时，只要当前页⾯没有关闭，不管你当前浏览的是其他页⾯还是其他应⽤，有消息通知时，屏幕右侧都会出现消息通知的弹框，点击消息提⽰框，这会跳转到消息页⾯。
注意：如果⽤的是Chrome浏览器的新版本，则必须是https协议，消息通知⽅可有效（当然如果是⾃⼰做测试，在本机⽤本地ip，则⽆所谓http还是https），chrome的旧版本则没有这⼀限制（具体到哪个版本为界限，就不清楚）
本篇博客也只是简单的记录⼀下如何实现这样的消息通知效果，想了解更详细的知识点，可以参考张鑫旭⼤神的博客：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。