一站式
企业服务平台
400-6789-948

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();};}}; 

赞(10) 联系作者
未经允许不得转载:【聚禄鼎】一站式企业服务平台 » notificationapi通知功能(html5notificationapi通知功能)
分享到

评论 抢沙发

让我们一起创建更加美好的网络世界

本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息!

扫码添加站长微信

扫码添加小编微信

登录

找回密码

注册