Press "Enter" to skip to content

浏览器桌面通知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 为激活浏览器但不激活打开的新标签页

打赏 赞(2)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code