怎么让用户收到浏览器的消息提醒？-js教程-PHP中文网

如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢？这个问题作为webrd是要正面面对的. 大约可分两种场景：一种是类似桌面通知的形式还有一种是类似qq提醒(在系统任务栏闪烁随后高亮);接下来分别研究下：

桌面提醒：

这个H5有个强大的API没错就是Notification, 没听过？先去了解下，很详细;浏览器不同对其支持程度也不同，简单讲就是有兼容问题，而笔者要说的就是基于Notification的一款小类库 ,其支持：IE9+、Safari6、Firefox、Chrome；好吧都是前辈的结晶，我就是个搬砖的，下面附一个简单的小demo:

ps: 么有用类库, 就是练手用的..实际还是用类库吧；

Spell.tools

高颜值AI内容营销创作工具

下载

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) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈，怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以，不过这个就算了，除非脑子进水了...; 期待大神指点..；