桌面通知之Notification

关于

什么是Notification？
https://developer.mozilla.org/en-US/docs/Web/API/notification

关于notification的实现步骤如下，摘自原文链接

1.检查浏览器是否支持Notification
2.检查浏览器的通知权限（是否允许通知）
3.若权限不够则获取浏览器的通知权限
4.创建消息通知
5.展示消息通知

使用注意

遗憾的是，由于浏览器的隐私与安全策略，目前就笔者测试所知，遵循http协议的网址只有火狐支持外网使用notification，google只支持本地玩玩~，若https协议，那么应该 可以适用。

火狐如何使用notification

1.打开火狐浏览器访问网址
2.点击右侧箭头 添加允许通知的权限

3.点击更多信息

4.去掉勾选 允许打开即发送

实现代码

可以参照关于部分的实现步骤理解代码

//定时器  6秒调一次
let int=self.setInterval("notifyMe()",6000);
//桌面系统通知的方法
function notifyMe() {
    //先判断一下 有没有要审核的单子  如果有 那么调一下系统通知进行桌面提醒
    $.ajax({
        type:"post",
        url:path + 'ApprovalCenter/remind',
        dataType:'json',
        success:function (result) {
            console.log(result)
            if (result.success == 1){
                    //注释部分意思是 是否最小化浏览器窗口时再调用
                    // if (document.visibilityState === 'hidden') {
                    //创建构造函数
                    const NotificationInstance = Notification || window.Notification;
                    //!!通常用来做类型判断，就是双重否定等于肯定的意思
                    //判断浏览器是否支持notification
                    if (!!NotificationInstance) {
                        //先去获取允许
                        const permissionNow = NotificationInstance.permission;
                        if (permissionNow === 'granted') {//允许通知
                            CreatNotification();
                        } else if (permissionNow === 'denied') {//拒绝通知
                            console.log('refuse!!!');
                        } else {//默认状态 default 尚未请求用户许可
                            setPermission();
                        }
                        //请求获取通知权限
                        function setPermission() {
                            NotificationInstance.requestPermission(function (PERMISSION) {
                                if (PERMISSION === 'granted') {
                                    CreatNotification();
                                } else {
                                    console.log('refuse!!!');
                                }
                            });
                        }
                        //创建消息通知
                        function CreatNotification() {
                            //一些属性
                            // Notification.body   //通知的具体内容
                            // Notification.tag    //实例化的notification的id
                            // Notification.icon   //通知的缩略图
                            const n = new NotificationInstance('**PC端消息通知', {
                                body: result.info,
                                tag: 'chuanxi',
                                when: true,
                                icon: 'http://nwzimg.wezhan.cn/contents/sitefiles2036/10184926/images/14183755.png',
                            });
                            n.onshow = function () {
                                console.log('show！！！');
                            }
                            n.onclick = function (e) {
                                //可以直接通过实例的方式获取data内自定义的数据
                                //也可以通过访问回调参数e来获取data的数据
                                window.open(n.data.url, '_blank');
                                n.close();
                            }
                            n.onclose = function () {
                                console.log('close！！！');
                            }
                            n.onerror = function (err) {
                                console.log('error！！！');
                                throw err;
                            }
                            setTimeout(() => {
                                n.close();
                            }, 8000);
                        }
                    }
                // }
            }

        }
    });
}

效果图