HTML5桌面通知:notification api-阿里云开发者社区

开发者社区> 杰克.陈> 正文

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

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9485 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11191 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9049 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13168 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21895 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6886 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4008 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载