JavaScript 兼容新旧版chrome和firefox的桌面通知

Posted 2020-09-03

1.新/旧版本的chrome和firefox都可支持，IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字。

2.设置为提示窗口显示5秒即关闭。

3.可设置图标和点击提示窗口要跳转到的页面(见输入参数）。

 

            var timer = null,  
                title = $(‘title‘).text();  
  
  
            $(‘body‘).on(‘click‘, function() {  
                clearInterval(timer);  
                $(‘title‘).text(title);  
            });  
  
            function showMsgNotification(title, msg , iconUrl ,clickUrl) {  
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;  
                if (window.webkitNotifications) {  
                    //chrome老版本  
                    if (window.webkitNotifications.checkPermission() == 0) {  
                        var notif = window.webkitNotifications.createNotification(iconUrl, title, msg);  
                        notif.display = function() {
                             setTimeout(function() {
                                 notif.close();
                             }, 5000);
                        }  
                        notif.onerror = function() {
                            
                        }  
                        notif.onclose = function() {
                            
                        }  
                        notif.onclick = function() {
                            window.focus();
                            window.location.href = clickUrl;
                        }  
                        notif.replaceId = ‘Meteoric‘;  
                        notif.show();  
                    } else {  
                        window.webkitNotifications.requestPermission($jy.notify);  
                    }  
                }
                else if(Notification) {//支持桌面通知  
                    if(Notification.permission == "granted") {//已经允许通知  
                        var instance = new Notification(title, {  
                            body: msg,  
                            icon: iconUrl 
                            //renotify : true
                        });  
  
                        instance.onclick = function() {  
                            //$(‘body‘).css({‘background‘: ‘red‘});  
                            //console.log(‘onclick‘); 
                            window.focus();
                            window.location.href = clickUrl;
                            //window.open(clickUrl, "_blank");
                        };  
                        instance.onerror = function() {  
                            //console.log(‘onerror‘);  
                        };  
                        instance.onshow = function() {  
                             setTimeout(function() {
                                 instance.close();
                             }, 5000);
                        };  
                        instance.onclose = function() {  
                            //console.log(‘onclose‘);  
                        };  
                    }else {//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)  
                        Notification.requestPermission(function(status) {  
                            if (status === "granted") {//用户允许  
                                var instance = new Notification(title, {  
                                    body: msg,  
                                    icon: iconUrl 
                                });  
  
                                instance.onclick = function() {  
                                    window.focus();
                                    window.location.href = clickUrl;
                                };  
                                instance.onerror = function() {  
                                    // Something to do  
                                };  
                                instance.onshow = function() {  
                                    // Something to do  
                                };  
                                instance.onclose = function() {  
                                    // Something to do  
                                };  
                            }else {//用户禁止  
                                return false; 
                            }  
                        });  
                    }  
                }else {//不支持(IE等)  
                    var index = 0;      
  
                    clearInterval(timer);  
                    timer = setInterval(function() {  
                        if(index%2) {  
                            $(‘title‘).text(‘【　　　】‘+ title);//这里是中文全角空格，其他不行  
                        }else {  
                            $(‘title‘).text(‘【快讯】‘+ title);  
                        }  
                        index++;  
  
                        if(index > 20) {  
                            clearInterval(timer);  
                        }  
                    }, 500);  
                }  
            }