浏览器notification调用系统通知

2023年2月17日 110次阅读 来源: bettjw

刚做了网页里调用系统通知的功能，这样即使浏览器不在最上面也能够收到提醒。通过浏览器的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

《浏览器notification调用系统通知》

《浏览器notification调用系统通知》

    原文作者：bettjw
    原文地址: https://blog.csdn.net/junweibet/article/details/84839350
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞