对于在作PC网页端的一些消息提醒,这个仍是蛮有用的。经过html5的audio声音提醒 ,加上html5的notification浏览器消息弹出提醒,提升交互体验。html
整个流程是:
html5
1.浏览器初始化的时候,就判断该浏览器是否支持Notification,假设浏览器支持,而且用户也赞成发送信息。
浏览器
2.判断是否有新消息?
url
3.若是有新消息,先给予声音提醒.再给予浏览器Notification提醒。
code
//这里的能够隐藏音频组件。 <audio id="tipAudio" style="position:absolute;top:0;left:0;z-index:-1"> <source src="../include/image/tipAudio.ogg" type="audio/ogg"> <source src="../include/image/tipAudio.mp3" type="audio/mpeg"> </audio> function notify(){ $("#tipAudio")[0].play(); if(window.Notification){ if(Notification.permission==='granted'){ //icon_url 图片资源,title:消息标题,content:消息内容 var notification = new Notification(title,{ "icon": icon_url,"body":content}); }else { Notification.requestPermission(); }; } }