HTML5桌面通知:notification api
博客专区 > Rickxue 的博客 > 博客详情
HTML5桌面通知:notification api
Rickxue 发表于2年前
HTML5桌面通知:notification api
  • 发表于 2年前
  • 阅读 249
  • 收藏 15
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 对于在做PC网页端的一些消息提醒,这个还是蛮有用的。通过html5的audio声音提醒 ,加上html5的notification浏览器消息弹出提醒,提高交互体验。

    对于在做PC网页端的一些消息提醒,这个还是蛮有用的。通过html5的audio声音提醒 ,加上html5的notification浏览器消息弹出提醒,提高交互体验。

    整个流程是:

    1.浏览器初始化的时候,就判断该浏览器是否支持Notification,假设浏览器支持,并且用户也同意发送信息。

    2.判断是否有新消息?

    3.如果有新消息,先给予声音提醒.再给予浏览器Notification提醒。

    

//这里的可以隐藏音频组件。
<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();
	   };
    }
}
共有 人打赏支持
粉丝 5
博文 34
码字总数 12890
×
Rickxue
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: