开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5桌面通知:notification api

简介: 原文:HTML5桌面通知:notification api 1. 为什么需要HTML5的桌面通知 传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。
+关注继续查看
原文:HTML5桌面通知:notification api

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. 静态方法

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. 实例方法

notificationInstance.show()
//调用该方法将在右下角弹出一个通知窗口
notificationInstance.cancel()
//调用该方法将关闭通知窗口

3.2 Notification:

在chrome26+ 终端里面输入window.Notification并键入回车键,会发现这东西它也是存在的,根据某些博客的说法,这个Notification会是webkitNotifications的标准化形态(传说中的进化),这种方式的实现相对于webkitNotifications的实现更简洁,更面向对象一些。 构造函数:

Notification(title, options)
//@param {String} title 要显示的通知标题
//@param {Object} options 备选项参数,键值对
//option 结构如下
dictionary NotificationOptions {
  NotificationDirection dir = "auto";
  DOMString lang = "";
  DOMString body;
  DOMString tag;
  DOMString icon;//在实例化的时候会异步的去获取
};

//新建一个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:该属性是只读的不能手动修改

  //在百度的首页打开console
  Notification.Permission = 'granted'
  Notification.Permission   //'default'
  

实例属性:

以下属性都需要在Notification实例上才能访问,为只读属性,并且就是通过option来赋值

Notification.dir    //
Notification.lang
Notification.Body   //通知的具体内容
Notification.tag    //实例化的notification的id
Notification.icon   //通知的缩略图

3.2.2 方法


静态方法

Notification.requestPermission() ``` //该方法将会询问用户是否允许显示通知 ``` 该方法不能由页面自主调用,必须由用户主动事件触发,还是以百度的页面为例,百度的搜索框的id为'kw':

//不通过事件触发直接调用
Notification.requestPermission()
//页面无反应
```Javascript //通过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面信息栏会弹出询问用户是否允许显示桌面通知

```

Notes:当用户同意之后,再次调用该方法则无效,即该方法仅对Notification.Permission不为'granted'的时候起作用


实例方法

Notification.close()    //该方法允许通过代码控制关掉notification

Notes: Notification 没有实例方法show(),在Notification实例化的时候,浏览器就已经自动的去处理notification的显示过程了。

3.3 代码示例

以下代码将展示如何使用webkitNotification和Notification来显示桌面通知

3.3.1 webkitNotification

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

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

------Written with Stack Edit

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
44 0
前端静态页面html5样式设置css页面渲染
前端静态页面html5样式设置css页面渲染
49 0
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
123 0
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
37 0
Groundwork:响应式 HTML5,CSS & JavaScript 工具包
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序。
797 0
HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体
  今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/。
1060 0
HTML5实践 -- 使用CSS 实现弹性视频
  转载请注明原文地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html     当我编码Elemin Theme(我最近设计的一个响应式的站点)的时候,我遇到的一个跳帧就是,如何能让嵌入式的视频在尺寸变化上变得更加灵活。
1077 0
HTML5实践 -- 使用css装饰你的图片画廊 - part2
  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html     在上一讲中,我们的解决方案使用到了jquery去创建一个span标签。
1119 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
API 网关实践
立即下载
重保场景及API安全指南
立即下载