1. 为什么需要HTML5的桌面通知

传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面,仅仅依附于浏览器。


2. 一个桌面通知生成的正常流程

我们先来看看一个桌面通知是如何生成的:

  1. 检查浏览器是否支持Notification
  2. 检查浏览器的通知权限(是否允许通知)
  3. 若权限不够则获取浏览器的通知权限
  4. 创建消息通知
  5. 展示消息通知
    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:该属性是只读的不能手动修改

1
2
3
//在百度的首页打开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 icon_url = 'http://www.w3.org/';
            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的更多相关文章

  1. html5桌面通知,notification的使用,右下角出现通知框

    1先判断浏览器是否支持:window.Notification 2判断浏览器是否开启提示的权限:Notification.permission === 'granted'(如果不允许则设置为允许:No ...

  2. HTML5桌面通知:notification

    最近由于公司业务需要,领导要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果!由于自己才疏学浅,一时还没明白微信是怎么实现的!所以只能问百度(因为懒得FQ)咯! 在网上搜索了N久,心都 ...

  3. 轻松让HTML5可以显示桌面通知Notification非常实用

    使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...

  4. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  5. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  6. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  7. HTML5 桌面通知:Notification API

    原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...

  8. 介绍一个比较酷东西:HTML5 桌面通知(Notification API)

    Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来 ...

  9. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

随机推荐

  1. prince2 证书有用吗

    prince2 证书有用吗  ? 项目管理是一件非常困难的事情,新闻里充斥着虽利润高却未能成功支付的项目案例.这是为什么呢? 最主要的原因是项目工作比日常的商业工作要困难的多.日常的商业工作往往是重复 ...

  2. MVC4脚本压缩 BundleTable bundles 404错误

    在发布网站的时候,因为使用了MVC4的新特性BundleTable,造成访问的时候js和css报了404错误, google了以后, 有朋友说是因为要在webservice添加 <modules ...

  3. php: 学习记录

    1.get_object_vars($obj) 获取对象$obj的属性数组 2.类和对象 <?php // 类和对象 echo "类和对象" . "\n" ...

  4. css盒子模型层级3D图

    作为前端开发工程师,大家都应该知道盒子模型.下面用一张图来表达3D盒子模型的层级关系 大家可以看到background-color 在background-image的下一层.这个希望对大家有帮助

  5. ADO

    目 录 第1章 基础    1 1.1 引入ADO库文件    1 1.1.1 版本    1 1.2 初始化OLE/COM库环境    2 1.3 comdef.h    2 1.3.1 字符串编码 ...

  6. [Java] 读写字符串数据

    package test.stream; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  7. HDU 1536 sg-NIM博弈类

    题意:每次可以选择n种操作,玩m次,问谁必胜.c堆,每堆数量告诉. 题意:sg—NIM系列博弈模板题 把每堆看成一个点,求该点的sg值,异或每堆sg值. 将多维转化成一维,性质与原始NIM博弈一样. ...

  8. WEB学习笔记10-高可读性的HTML之HTML 语义化

    实现如下所示工具栏: 做到标签语义化,首先要尽量减少使用<div>和<span>这两个标签. 分析:这是一个包含5个无序操作项的工具栏,因此应该使用符合语义的<ul> ...

  9. zabbix3.x添加H3C网络设备详解

    zabbix3.x添加H3C网络设备详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 前言: 欢迎加入:高级运维工程师之路 598432640 相信大家在看我的文章之前,也看过其 ...

  10. webpack3--配置多入口和多出口

    上一篇我们稍微提到了webpack.config.js.今天主要来说下如何配置多入口,多出口. 我们之前写到的webpack.config.js,具体代码如下: module.exports = { ...