HTML5 API详解（14）:Notification 实现桌面提醒

桌面提醒功能可以在窗口隐藏甚至是浏览器最小化（不被激活）的情况下，依然可以对用户进行信息通信，采用的方式就是在电脑桌面的右下角弹出消息提示框。这样的一个功能可以使用在一些消息推送的场景下。不过，虽然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 API详解（14）:Notification 实现桌面提醒相关推荐

HTML5 API详解（18）:IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
HTML5 API详解（17）:Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
HTML5 API详解（16）:web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
HTML5 API详解（15）:History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验
页面可见性API可以让你知道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
HTML5 API详解（3）：为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
HTML5 API详解（8）:worker多线程教你如何避免页面卡死
web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结.挂起.卡死. 比如:我们要运算一个复杂的数学计算:递归计算. ...

HTML5 API详解（14）:Notification 实现桌面提醒

HTML5 API详解（14）:Notification 实现桌面提醒相关推荐

最新文章

热门文章