HTML5桌面通知newNotification

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:表示要显示的图像的一个URL。image:要在通知中展示的图标的所有的URL,并且可以是一个或多个。requireInteraction:通知维持有效不会自动关机, false默认。

4.2 electron模式,调用就可以

export const getNotification = (cb? : () => void) => { if (Notification && (Notification.permission === “default” || Notification.permission === “denied”)) { Notification.requestPermission((permission) => { if (permission === “granted”) { cb && cb(); } }); } else { cb && cb(); } }; export const createNotification = (message: MessageItem, click?• (id: string, type: any) = > void, tag? : string) => { if (Notification && document.hidden) { const title = message.fromName; const notification = new Notification(title, { dir: “auto”, tag: tag ?? (message.id === “” ? message.conversationId : message.id), renotify: true, icon: icons, body: parseMessageType(message), requireInteraction: true, }); const id = message.conversationId; notification.onclick = () => { click && click(id, message.type); notification.close(); }; } }; 

原文链接:http://www.sfdkj.com/14019.html

 

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片