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

程序员文章站 2022-05-18 20:58:40

...

效果右下角提示
浏览器发起桌面通知Notification.requestPermission
三种状态权限

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>