浏览器通知，可配合socket

最新推荐文章于 2024-11-22 11:18:47 发布

「已注销」

最新推荐文章于 2024-11-22 11:18:47 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

文章标签： Notification

本文链接：https://blog.youkuaiyun.com/q1424966670/article/details/85629352

本文深入探讨了浏览器通知API的使用方法，包括权限检查、请求权限、创建和自定义通知等关键步骤，通过示例代码展示了如何在网页中实现弹出式通知，适用于前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>浏览器通知</title>
</head>

<body>
</body>
<script type="text/javascript">
// 	   granted: //用户已经明确的授予了显示通知的权限。.
// 　　denied: //用户已经明确的拒绝了显示通知的权限。
// 　　default: //用户还未被询问是否授权; 这种情况下权限将视为 denied.
notify()
//先检查浏览器是否支持
function notify() {
    if (!('Notification' in window)) {
        alert('你的浏览器不支持Notification')
    }
    //检查是否拥有通知权限；有就通知，没有请求；
    else if (Notification.permission == 'granted') {
        let options = {
            icon: 'https://ws1.sinaimg.cn/bmiddle/6af89bc8gw1f8nhno1ixrj207l08c3yp.jpg', 
            body: 'such a beautiful wolrld!'
        }
        const notification = new Notification('标题!', options);
        // 定义通知窗口点击函数
        notification.onclick = function() {
            //如果通知消息被点击,通知窗口将被激活
            alert("success");
        };
        // 定义通知错误事件
        notification.onerror = function() {
            // console.log("");
        };
        // 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
        notification.onshow = function() {
            // 窗口显示 播放音频
            let audio = new Audio("./Бамбинтон Зая.mp3");
            audio.play();
            // 窗口显示3S后关闭
            setTimeout(function() {
                notification.close();
            }, 3000);
        };
        // 定义通知关闭事件
        notification.onclose = function() {
            alert("close")
        };


    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(function(result) {
            if (result == 'granted') {
                const notification = new Notification('socket可用!', options);
            }
        })
    }
}
</script>

</html>