如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢？ 这个问题作为webRd是要正面面对的. 大约可分两种场景：一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来分别研究下：
桌面提醒：
这个H5有个强大的API没错就是Notification, 没听过？ https://developer.mozilla.org/en-US/docs/Web/API/notification 先去了解下，很详细;浏览器不同对其支持程度也不同，简单讲就是有兼容问题，而笔者要说的就是基于Notification的一款小类库 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支持：IE9+、Safari6、Firefox、Chrome；好吧都是前辈的结晶，我就是个搬砖的，下面附一个简单的小demo:
ps: 么有用类库, 就是练手用的..实际还是用类库吧；
function _Notification(title,option){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
function creatNotification(title, option){
var instance = new Notification(title, option);
instance.onclick = function () {
console.log(‘onclick‘);
};
instance.onerror = function () {
console.log(‘onerror‘);
};
instance.onshow = function () {
console.log(‘onshow‘);
};
instance.onclose = function () {
console.log("close")
}
}
function requestPermission(title, option){
Notification.requestPermission(function(status) {
status === "granted"?creatNotification(title, option):failNotification(title);
});
}
function failNotification(title){
var timer;
return function(timer){
var index = 0;
clearInterval(timer);
timer = setInterval(function() {
if(index%2) {
document.head.getElementsByTagName("title")[0].innerHTML = ‘【 】‘+ title;
}else {
document.head.getElementsByTagName("title")[0].innerHTML = ‘【新消息】‘+ title;
}
index++;
if(index > 20) {
clearInterval(timer);
}
}, 500);
}(timer);
}
}
任务栏提醒：
这个还真是个问题; 至于解决的终极方法目前笔者还没研究明白;不过window.open 这种弹窗会触发闪烁提醒, 但需要解决用户禁止弹窗的情况,可以模拟from提交 || 超链接(a) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈，怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以，不过这个就算了，除非脑子进水了...; 期待大神指点..；
原文：http://www.cnblogs.com/liuyushao/p/6971340.html