js实现浏览器通知、浏览器推送

js实现浏览器通知

##这种一直在轮询等到有通知的时候获取权限是否显示通知

在这里插入代码片
(function(window) {
    'use strict';
    function Notify() {};

    window.Notify = Notify;
    //设置参数;
    var options = {
        noticeList: [], //通知存储数组
        notification: null, //通知对象
        title: '',
        body: '',
        data: {
            url: 'https://www.aigupiao.com/'
        },
        icon: 'img/logo.png',
        content: "通知...",
        time: 1000
    };


    Notify.showNotice = function(title, body, icon, data) {
        if (!("Notification" in window)) {
            alert("抱歉，您的浏览器不支持桌面通知");
        } else if (Notification.permission === "granted") {
            options.notification = new Notification(title ? title : options.title, {
                body: body ? body : options.body,
                icon: icon ? icon : options.icon,
                // requireInteraction: true,
                data: data
            });
            options.noticeList.push(options.notification);

        } else if (Notification.permission !== "denied") {
            Notification.requestPermission(function(permission) {
                if (permission === "granted") {
                    options.notification = new Notification(title ? title : options.title, {
                        body: body ? body : options.body,
                        icon: icon ? icon : options.icon,
                        // requireInteraction: true,
                        data: data
                    });
                    options.noticeList.push(options.notification);
                }
            });
        }
    };


    //单击通知
    Notify.clickNotice = function() {
        if (options.notification != null) {
            options.notification.onclick = function() {
                window.open(options.notification.data.url, '_blank');
            };
        }

    };

    //清除通知
    Notify.clearNotice = function() {
        // options.notification.close();
        options.noticeList[options.noticeList.length - 1].close();
        options.noticeList.pop();
    };

    //清除所有通知
    Notify.clearAllNotice = function() {
        for (var i = 0; i < options.noticeList.length; i++) {
            options.noticeList[i].close();
        }
    };

    //自动关闭
    Notify.autoClose = function(time) {
        if (options.notification != null) {
            time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
        }
    };


    Notification.requestPermission(function(permission) {
        console.log(permission);
    });

    var inter = setInterval(function() {
        $.ajax({
            url: "你要轮询的url",
            dataType: "json",
            success: function(res) {
                if(res.rslt === 'succ'){
                    var data = res.data
                    for (var i = data.length - 1; i >= 0; i--) {
                        (function(item){
                            Notify.showNotice(item.title, item.content, item.icon, item);
                            Notify.clickNotice()
                            Notify.autoClose(20000);
                        })(data[i])
                    }
                }

                // Notify.clearNotice();
                // Notify.clearAllNotice();

            }
        });
    }, 6000);
})(window);

或者

这种适合没有权限就不让轮询的情况（防止无用的轮询）。

;
(function(window) {
    'use strict';

    var open_notify =  localStorage.getItem('notify_switch');
    console.log(open_notify)
    if(open_notify === 'true' || open_notify === null) {
        $('#notify_switch').removeClass('is_off').addClass('is_open');
    }
    if(open_notify === null) {
        localStorage.setItem('notify_switch','true');
    }


    function Notify() {};

    window.Notify = Notify;
    var inter = null;
    //设置参数;
    var options = {
        noticeList: [], //通知存储数组
        notification: null, //通知对象
        title: '',
        body: '',
        data: {
            url: 'https://www.aigupiao.com/'
        },
        icon: 'img/logo.png',
        content: "通知...",
        time: 1000
    };


    Notify.showNotice = function(title, body, icon, data) {
        if (!("Notification" in window)) {
            alert("抱歉，您的浏览器不支持桌面通知");
        } else if (Notification.permission === "granted") {
            options.notification = new Notification(title ? title : options.title, {
                body: body ? body : options.body,
                icon: icon ? icon : options.icon,
                // requireInteraction: true,
                data: data
            });
            options.noticeList.push(options.notification);

        } else if (Notification.permission !== "denied") {

            Notification.requestPermission(function(permission) {
                if (permission === "granted") {
                    options.notification = new Notification(title ? title : options.title, {
                        body: body ? body : options.body,
                        icon: icon ? icon : options.icon,
                        // requireInteraction: true,
                        data: data
                    });
                    options.noticeList.push(options.notification);
                }
            });
        }
    };



    //单击通知
    Notify.clickNotice = function() {
        if (options.notification != null) {
            options.notification.onclick = function() {
                window.open(options.notification.data.url, '_blank');
            };
        }

    };

    //清除通知
    Notify.clearNotice = function() {
        // options.notification.close();
        options.noticeList[options.noticeList.length - 1].close();
        options.noticeList.pop();
    };

    //清除所有通知
    Notify.clearAllNotice = function() {
        for (var i = 0; i < options.noticeList.length; i++) {
            options.noticeList[i].close();
        }
    };

    //自动关闭
    Notify.autoClose = function(time) {
        if (options.notification != null) {
            time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
        }
    };


    //打开页面询问用户是否打开浏览器推送
    Notify.isNotice = function() {
        if (window.Notification) {
            // 支持
            console.log('yes');
        } else {
            console.log('no');

            // 不支持
        }
        console.log(Notification.permission);
        Notification.requestPermission(function(permission) {
            console.log(permission)
            if (permission === "granted") {
                polling();
                console.log(permission)
                return;
                //如果开启则开始轮询推送
            }else if(permission === "denied") {
                console.log(permission)
                //如果用户选择关闭则关闭轮询
            }
        });
    };

    function polling() {
        var open_notify_r =  localStorage.getItem('notify_switch');
        console.log(open_notify_r)
        if(open_notify_r != 'true') {
            console.log(open_notify_r)
            return;
        }
        inter = setInterval(function() {
            console.log(122121)
            $.ajax({
                url: "轮询url",
                dataType: "json",
                success: function(res) {
                    if(res.rslt === 'succ'){
                        var data = res.data
                        for (var i = data.length - 1; i >= 0; i--) {
                            (function(item){
                                Notify.showNotice(item.title, item.content, item.icon, item);
                                Notify.clickNotice()
                                Notify.autoClose(20000);
                            })(data[i])
                        }
                    }

                    // Notify.clearNotice();
                    // Notify.clearAllNotice();

                }
            });
        }, 60000);
    }

    Notify.isNotice();

    $('#notify_switch').click(function() {
        if($(this).hasClass('is_open')) {
            $(this).removeClass('is_open').addClass('is_off');
            localStorage.setItem('notify_switch','false');
            clearInterval(inter);
        } else {
            $(this).removeClass('is_off').addClass('is_open');
            localStorage.setItem('notify_switch','true');
            clearInterval(inter);
            Notify.isNotice();
        }
    })
})(window);

一些注意注意事项

1、一些内核下只支持https协议的页面获得推送权限。
2、低版本的浏览器不支持此api
3、有些浏览器（比如qq浏览器）默认会关闭所有网站获取通知的权利（在浏览器设置层面），这时js无能为力，只能是用户手动设置浏览器权限来达到获取通知的目的。