·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解14:Notification API PC端实现桌面提醒

时间:2017-03-07 11:33web前端教程
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框

桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框。这样的一个功能可以使用在一些消息推送的场景下。不过,虽然html5可以实现这样的功能,但是目前浏览器对这个API的支持还不是很普及,其中Chrome和firefox都已经很好的支持,此外,要实现提醒功能,还需要用户在浏览器进行授权操作,否则无法实现。

1.Notification.requestPermission()

该方法用于获取用户授权操作,会返回一个参数,分别对应着3种状态,"granted"表示用户同意消息提醒;“|default”表示默认状态,既没有同意也没有拒绝;“denied”表示用户拒绝消息提醒。这个值保存在一个内部变量中,并且是只读的,通过checkPermission()方法可以提取到这个状态值。

2. new Notification('titleTxt',{'iconUrl','bodyTxt','lang','tag',‘dir’})

这个方法用于创建消息提醒,接受三个参数:iconUrl是icon的地址,titleTxt是标题消息,bodyTxt是消息主体,tag是通知框ID,lang是语言,dir是方向,都是字符串类型。

3.Notification.close();

关闭通知窗口

挺简单的一个API,下面看案例代码:

//发出权限请求

Notification.requestPermission(function (perm) {

if (perm == "granted") {

//获得允许权限

var n = new Notification("这是标题:", {

icon: "这是icon的url",

body:"这是主体信息"

});

}

setTimeout(function(){

//三秒后关闭

n.close();

},3000);

相关推荐html5在线课堂专栏(含基础课程/视频教学/html5免费视频教学/html5教语法)

保利威视云直播提供稳定流畅,高画质,低延迟的直播服务

酷播专业级免费跨平台播放器