浏览器发起桌面通知Notification.requestPermission

最新推荐文章于 2025-03-15 16:31:30 发布

九段刀客

最新推荐文章于 2025-03-15 16:31:30 发布

阅读量3.5k

点赞数 2

分类专栏： chrome 文章标签： chrome

本文链接：https://blog.csdn.net/weixin_35958891/article/details/103888056

版权

chrome 专栏收录该内容

4 篇文章

订阅专栏

效果右下角提示
在这里插入图片描述
三种状态权限

default
用户还未被询问是否授权，所以通知不会被显示。参看 Getting permission 以了解如何请求显示通知的权限。
granted
表示之前已经询问过用户，并且用户已经授予了显示通知的权限。
denied
用户已经明确的拒绝了显示通知的权限。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<button onclick="notifyMe()">Notify me!</button>
    <script>
        function notifyMe() {
  			Notification.requestPermission(status=>{
  				if(status === 'granted'){
  					let notify = new Notification('ERP系统提示',{
  						icon:'./img/logo.png',
  						body:'您有新的待审批'
  					})

  					// 桌面消息显示时
  					notify.onshow = ()=>{
  						let audio = new Audio('./mp3/test2.mp3');
  						audio.play();
  					}

  					// 点击时桌面消息时触发
  					notify.onclick = ()=>{
  						// 跳转到当前通知的tab,如果浏览器最小化，会将浏览器显示出来
  						window.focus()
  					}
  				}
  			})
		}
    </script>
</body>
</html>