浏览器notification调用系统通知

刚做了网页里调用系统通知的功能,这样即使浏览器不在最上面也能够收到提醒。通过浏览器的Notification实现,需要发送通知时调用showNotice(msg)方法即可。

function showNotice(msg) {
    //发送通知
    newNotify = function () {
        var notification = new Notification("系统通知:", {
            dir: "auto",
            lang: "hi",
            requireInteraction: true,
            //tag: "testTag",
            icon: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
            body: msg
        });
        notification.onclick = function (event) {
            //回到发送此通知的页面
            window.focus();
            //回来后要做什么
            console.log("I'm back");
        }
    }
    //权限判断
    if (Notification.permission == "granted") {
        newNotify();
    } else {
        //请求权限
        Notification.requestPermission(function (perm) {
            if (perm == "granted") {
                newNotify();
            }
        })
    }
}

通常在页面加载时请求通知的权限

if (Notification.permission == "default") {
    Notification.requestPermission();
}

并不是所有浏览器都支持这个功能,下面是支持的浏览器列表(截图来源),分别是pc端和移动端,时间截止2018-12-05

需要注意的是,chrome只允许https的站点调用Notification,如果是http站点会默认拒绝,并且无法修改。

不过有个例外:http://localhost/ ,这个url被特批可调用。所以当我在本地测试完成美滋滋发到服务器却发现不能用时真是WTF

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值