如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来分别研究下:
桌面提醒:
这个H5有个强大的API没错就是Notification, 没听过? 先去了解下,很详细;浏览器不同对其支持程度也不同,简单讲就是有兼容问题,而笔者要说的就是基于Notification的一款小类库 ,其支持:IE9+、Safari6、Firefox、Chrome;好吧都是前辈的结晶,我就是个搬砖的,下面附一个简单的小demo:
ps: 么有用类库, 就是练手用的..实际还是用类库吧;
<br>
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); } }
<br>
任务栏提醒:
这个还真是个问题; 至于解决的终极方法目前笔者还没研究明白;不过window.open 这种弹窗会触发闪烁提醒, 但需要解决用户禁止弹窗的情况,可以模拟from提交 || 超链接(a) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈,怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以,不过这个就算了,除非脑子进水了...; 期待大神指点..;
以上是怎么让用户收到浏览器的消息提醒?的详细内容。更多信息请关注PHP中文网其他相关文章!