notificationapi通知功能(html5notificationapi通知功能)

1.背景:

即时通讯方面，桌面端app开发方面，在使用者与使用者进行闲聊时，在发出闲聊消息的同时须要做接收消息通知的工作，由于所使用的技术栈为electron，其亦具有本身的通知模块，由于其它原因暂无法使用最终查询HTML5新加入的Notification API通知功能但是我们在使用的过程中发现它可以让我们更方便地查看消息。这是因为它可以把网页上显示的消息发送到另一个页面，从而实现了信息的共享即使把浏览器窗口最小化也能得到消息通知，因此先使用，以后再进行后话的处理

2.通知权限:

2.1先须要看看浏览器对Notification的支持率，支持率就会出现以下的情况，否则就到此为止吧

2.2在Notification.permission之后，侦测使用者是否允许告知:

// Notification.permission === "granted" 用户容许 // Notification.permission === "denied" 用户拒绝 // Notification.permission === "denied" 不知道用户的选择，默认 if(Notification.permission === "granted"){ console.log("用户容许通知")； instance_init(title， options)； }else if(Notification.permission === "denied"){ console.log("用户拒绝通知")； }else{ console.log("用户还没选择，去向用户申请权限吧")； Notification.requestPermission(function(status) { if(status=="granted"){ console.log("用户容许通知")； instance_init(title， options)； }else if(status=="denied"){ console.log("用户拒绝通知")； }else{ console.log("用户还没选择")； } })； }

title:公告标题options:公告设置选项，任选icon:表示要显示的图像的一个URLimage:要在通知中展示的图标的所有的URL，并且可以是一个或多个requireInteraction:通知维持有效不会自动关机， false默认

4.2 electron模式，调用就可以

exportconstgetNotification=(cb? :()=void)={if(Notification&；&；(Notification.permission==="default"||Notification.permission==="denied")){Notification.requestPermission((permission)={if(permission==="granted"){cb&；&；cb()；}})；}else{cb&；&；cb()；}}；exportconstcreateNotification=(message:MessageItem，click?• (id:string，type:any) =  void，tag? :string)={if(Notification&；&；document.hidden){consttitle=message.fromName；constnotification=newNotification(title，{dir:"auto"，tag:tag?? (message.id===? message.conversationId:message.id)，renotify:true，icon:icons，body:parseMessageType(message)，requireInteraction:true，})；constid=message.conversationId；notification.onclick=()={click&；&；click(id，message.type)；notification.close()；}；}}；