在B站上看消息推送视频，大多都是阉割版的swoole、workman教程，在里面发现一个浏览器左上角询问是否显示通知的东西，顿时来了兴趣，今天搜索相关信息，最终实现了并看到了效果。效果如下：

代码：

<script>
    ;
    (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://meet.leimingyang.cn/'
            },
            icon: '/merchant/resources/img/default-50x50.gif',
            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();
                };
            }
        };

        //清除通知
        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 () {
                $.ajax({
                    url: "/api/v1/site/notice-msg",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200) {
                            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);

</script>

注释比较详细，demo地址：https://meet.leimingyang.cn/