HTML5桌面通知:notification api
1. 为什么需要HTML5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面,仅仅依附于浏览器。
2. 一个桌面通知生成的正常流程
我们先来看看一个桌面通知是如何生成的:
- 检查浏览器是否支持Notification
- 检查浏览器的通知权限(是否允许通知)
- 若权限不够则获取浏览器的通知权限
- 创建消息通知
- 展示消息通知
NOTE: 关于第一点的说明需要做一些说明,Notification目前还没有标准化,所以目前只支持chrome19+和safari6+;网上有资料显示Firefox26+也支持,但是我拿我的Firefox27检测的结果是无法支持。
3. notification api基础说明及代码示例
目前notification的实现有两种:一种是之前草案中的形式:webkitNotifications对象, 另一种就是未来标准化的形式:Notification对象。首先来说一下webkitNotifications所包含的内容:
3.1 webkitNotifications:
3.1.1. 静态方法
1
2
3
4
5
6
|
window.webkitNotifications.checkPermission() //该方法返回0, 1, 2三个值,0代表PERMISSION_ALLOWED,即’允许’;1代表PERMISSION_NOT_ALLOWED,即不允许;2代表PERMISSION_DENIED,即拒绝 window.webkitNotifications.requestPermission() //调用该方法将会在浏览器的信息栏弹出一个是否允许桌面通知的提醒,该方法只能由用户主动事件触发,如click 或 mouse over,也就是说你不能在document.ready里面直接调用该方法。 window.webkitNotifications.createNotification( 'icon-url' , 'title' , 'body' ) //调用该方法将返回一个实例化的webkitNotifications对象 |
PS:调用以上方法都会存在安全异常,也就是当前页面的permission是否为0。
3.1.2. 实例方法
1
2
3
4
|
notificationInstance.show() //调用该方法将在右下角弹出一个通知窗口 notificationInstance.cancel() //调用该方法将关闭通知窗口 |
3.2 Notification:
在chrome26+ 终端里面输入window.Notification并键入回车键,会发现这东西它也是存在的,根据某些博客的说法,这个Notification会是 webkitNotifications的标准化形态(传说中的进化),这种方式的实现相对于webkitNotifications的实现更简洁,更面 向对象一些。 构造函数:
1
2
3
4
5
6
7
8
9
10
11
|
Notification(title, options) //@param {String} title 要显示的通知标题 //@param {Object} options 备选项参数,键值对 //option 结构如下 dictionary NotificationOptions { NotificationDirection dir = "auto" ; DOMString lang = "" ; DOMString body; DOMString tag; DOMString icon; //在实例化的时候会异步的去获取 }; |
1
2
|
//新建一个Notification实例,并根据permission为'granted'来完成notification的显示 var notification = new Notification( 'Hello Notification' ,{body: "I'm an enginneer!" }); |
3.2.1. 属性
静态属性:
Notification.Permission:
'default' 等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
Test:在chrome的地址栏里面输入http://www.baidu.com, 打开console,并在里面输入Notification.Permission 默认返回的是'default'.
Notes:该属性是只读的不能手动修改
123//在百度的首页打开console
Notification.Permission =
'granted'
Notification.Permission
//'default'
实例属性:
以下属性都需要在Notification实例上才能访问,为只读属性,并且就是通过option来赋值
1
2
3
4
5
|
Notification.dir // Notification.lang Notification.Body //通知的具体内容 Notification.tag //实例化的notification的id Notification.icon //通知的缩略图 |
3.2.2 方法
静态方法
Notification.requestPermission() ``` //该方法将会询问用户是否允许显示通知 ``` 该方法不能由页面自主调用,必须由用户主动事件触发,还是以百度的页面为例,百度的搜索框的id为'kw':
1
2
3
|
//不通过事件触发直接调用 Notification.requestPermission() //页面无反应 |
```Javascript //通过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面信息栏会弹出询问用户是否允许显示桌面通知
```
Notes:当用户同意之后,再次调用该方法则无效,即该方法仅对Notification.Permission不为'granted'的时候起作用
实例方法
1
|
Notification.close() //该方法允许通过代码控制关掉notification |
Notes: Notification 没有实例方法show(),在Notification实例化的时候,浏览器就已经自动的去处理notification的显示过程了。
3.3 代码示例
以下代码将展示如何使用webkitNotification和Notification来显示桌面通知
3.3.1 webkitNotification
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
document.getElementById( 'notifyButton' ).onclick = function (){ //判断浏览器是否支持notification if (window.webkitNotifications){ //判断当前页面是否被允许发出通知 if (webkitNotifications.checkPermission==0){ var title = 'Hello HTML5' ; var body = 'I will be always here waiting for you!' ; var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body); WebkitNotification.show(); } else { document.getElementById( 'requestbutton' ).onclick = function () { webkitNotifications.requestPermission(); }; } } else alert( "您的浏览器不支持桌面通知特性,请下载谷歌浏览器试用该功能" ); }; |
3.3.2 Notification
1
2
3
4
5
6
7
8
9
10
11
|
document.getElementById( 'notifyButton' ).onclick = function () { if (window.Notification){ if (Notification.Permission=== 'granted' ){ var notification = new Notification( 'Hello Notification' ,{body: "I hope that all the browser will support this\ function!" }); } else { document.getElementById( 'requestButton' ).onclick = function (){ Notification.requestPermission(); }; }; } else alert( '你的浏览器不支持此特性,请下载谷歌浏览器试用该功能' ); }; |
4. 参考文档
LINKS
from:http://www.cnblogs.com/lxshanye/p/3560188.html
HTML5桌面通知:notification api的更多相关文章
- html5桌面通知,notification的使用,右下角出现通知框
1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...
- HTML5桌面通知:notification
最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...
- 轻松让HTML5可以显示桌面通知Notification非常实用
使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- h5桌面通知Notification
H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 介绍一个比较酷东西:HTML5 桌面通知(Notification API)
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...
- 浏览器桌面通知--Notification
前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
随机推荐
- div中加入iframe,可以实现Ajax的功能
div中加入iframe,可以实现Ajax的功能,如果查询的时候,比如说城市的选择,用Ajax去实现, 在.net 可以考虑用UpdatePanel,但是点击了查询刷新表格(表格需要重新刷新加载,非纯 ...
- mir9-lua——《热血沙城》45度ARPG手游-Lua移植版
mir9——<热血沙城>,是9秒论坛开源的一个使用Cocos2d-x-2.2.1引擎开发的45度ARPG手游Demo,源代码为c++.mir9-lua是mir9的Lua移植版,使用Quic ...
- PAT-乙级-1004. 成绩排名 (20)
1004. 成绩排名 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入n名学生的姓名.学号.成绩,分 ...
- 结构型—桥接(Bridge)模式
1.意图: 将抽象部分(抽象接口)与它的实现部分(代码实现)分离,使它们都可以独立地变化. 理解:抽象部分是对外展现的接口(api),而实现部分是针对抽象接口提供的不同版本的功能实现,使两者独立变化指 ...
- DIY Ruby CPU 分析——Part III
[编者按]作者 Emil Soman,Rubyist,除此之外竟然同时也是艺术家,吉他手,Garden City RubyConf 组织者.本文是 DIY Ruby CPU Profiling 的第二 ...
- 2026-Keroro侵略地球
描述 Keroro来侵略地球之前,曾跟Giroro伍长打赌:“我一个人灭掉整个地球给你看!”. 于是Keroro同学真的自己一个人来到地球开始他的侵略行动了.从K隆星出发之前,Keroro从Kurur ...
- HDU 1422 重温世界杯(DP)
点我看题目 题意 : 中文题不详述. 思路 : 根据题目描述及样例可以看出来,如果你第一个城市选的是生活费减花费大于等于0的时候才可以,最好是多余的,这样接下来的就算是花超了(一定限度内的花超),也可 ...
- android webview网页控件
一个WebView的简单例子 .在开发过程中应该注意几点: 1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则 ...
- maven新建Spring MVC + MyBatis + Oracle的Web项目中pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- java去除重复的字符串和移除不想要的字符串
在java开发中碰到了有些字符串是重复的,如果在进行业务处理要全部遍历太对的数据就会重复,所以在进行业务处理前进行一个去重操作. 这里由于业务需要所以先将字符串转化为string数组,使用split分 ...