js 桌面通知

最新推荐文章于 2022-12-19 15:48:30 发布

tianmeng1999

最新推荐文章于 2022-12-19 15:48:30 发布

阅读量378

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/119409322

版权

JavaScript 专栏收录该内容

184 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
	function doNotify(title, options = {}, events = {}) {
    const notification = new Notification(title, options);
    for (let event in events) {
        notification[event] = events[event];
    }
}

function notify(title, options = {}, events = {}) {
    // 先检查浏览器是否支持
    if (!("Notification" in window)) {
        return console.error("This browser does not support desktop notification");
    }
    // 检查用户是否同意接受通知
    else if (Notification.permission === "granted") {
        doNotify(title, options, events);
    } 
    // 否则我们需要向用户获取权限
    else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {   
            // 如果用户接受权限，我们就可以发起一条消息        
            if (permission === "granted") {
                doNotify(title, options, events);
            }
        });
    }
}

notify("中奖提示", {
	    icon: "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image",
	    body: "恭喜你，一等奖",
	    tag: "tag"
	}, {
	    onclick(ev) {
	        console.log(ev);
	        ev.target.close();
	        window.focus();
	    }
	})
	</script>
</body>
</html>

在这里插入图片描述

tianmeng1999

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 桌面通知

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫