浏览器桌面通知Notification实践应用

目前用于客服通知提醒，Notification 又叫浏览器桌面通知、浏览器自动推送、桌面消息提醒等，这里记录下使用中常见的几个问题（仅在Chrome、Firefox中测试正常， 其他浏览器兼容性请参考 CanIUse ）

一、页面必须使用 https 协议

// js 判断页面协议
if (location.protocol !== 'https:') {
    location.href = location.href.replace('http://','https://');
    return false;
}

二、请求 Notification 权限

function has_notify_permission() {
    var options = {
        icon: '/Public/admin/img/elink_favicon.ico',
        body: '恭喜，您已开启桌面信息通知'
    };
    
    if (!('Notification' in window)) {
        alert('你的浏览器不支持桌面消息通知');
        return false;
    }
    else if (Notification.permission === 'granted'){
        new Notification('==提醒标题==', options);
        return false;
    }
    //检查是否拥有通知权限：有就发出通知，没有则请求桌面通知权限；
    else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(function (result) {
            if (result === 'granted') {
                new Notification('==提醒标题==', options);
                return true;
            }
        })
     }else {
        alert('请开启浏览器通知权限\r\n可百度【浏览器如何开启桌面通知权限】');
        return false;
    }
}

三、发送消息通知

function notify(msg) {
    msg = msg || '您有新消息！';
    if (Notification.permission === 'granted') {
        var options = {
            icon: '/favicon.ico',
            body: msg
        }
        var n = new Notification('==提醒标题==', options);
        // 当点击桌面通知时触发
        n.onclick = function () {
            window.focus();
            window.open('https://jeeinn.com/Msgs', '_self');
        }
        return true;
    }
    return false;
}

注：当点击桌面通知时，使用 `window.open(url, target)`， 第二个选项 target 为 _blank 时 Firefox 表现和 Chrome 不一致。Chrome 为激活浏览器并激活打开的新标签页 ，Firefox 为激活浏览器但不激活打开的新标签页