H5 Notification 桌面通知

最新推荐文章于 2022-12-20 17:55:56 发布

原创最新推荐文章于 2022-12-20 17:55:56 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css

本文详细介绍如何使用 Web Notifications API 在网页中实现消息推送功能，包括判断浏览器支持情况、请求权限及显示通知的具体步骤。

window.onload = function () {
suportNotify()
}

//判断浏览器是否支持Web Notifications API
function suportNotify(){
    if (window.Notification) {
        // 支持
        console.log("支持"+"Web Notifications API");
        //如果支持Web Notifications API，再判断浏览器是否支持弹出实例
        showMess()
    } else {
        // 不支持
        alert("不支持 Web Notifications API");
    }
}

//判断浏览器是否支持弹出实例
function showMess(){
    setTimeout(function () {
        console.log('1：'+Notification.permission);
        //如果支持window.Notification 并且 许可不是拒绝状态
        if(window.Notification && Notification.permission !== "denied") {
            //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
            Notification.requestPermission(function(status) {
                console.log('2: '+status);
                //如果状态是同意
                if (status === "granted") {
                    var m = new Notification('收到信息', {
                        body: '这里是通知内容！你想看什么客官？',　　//消息体内容
                        icon:"images/img1.jpg"　　//消息图片
                    });
                    m.onclick = function () {//点击当前消息提示框后，跳转到当前页面
                        window.focus();
                    }
                } else{
                    alert('当前浏览器不支持弹出消息')
                }
            });
        }
    },1000)
}