您的位置:首页 > Web前端 > HTML5

HTML5桌面通知:notification api

2015-12-07 00:00 561 查看
摘要: 对于在做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();
};
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: