notification 接口用于浏览器向用户提供通知内容；常见的如网页版的微信：

1、实现，需要Notifications API 提供的通知接口：

用法：

let notification = new Notification(title, options)

title参数：用于通知的主题；

options参数：是一个对象；用于配置被通知对象 notification 的属性；

 var options={

    dir://auto自动；ltr 从左到右；rtl 从右到左；

    lang：//指定通知使用的语言；

    body://通知中额外显示的字符串；

    icon://图片的URL，用于通知的图标；

}
var options = {

  body: 'this is a beautiful world',

  dir: 'rtl'

}

var notify1 = new Notification('hello world',options);

console.log(options.body==notify1.body)//true;

console.log(options.dir==notify1.dir)//true;
//options对象的属性都是绑定到 Notifiaction 的实例对象属性上的。
 

仅仅是构造一个Notification 对象的实例还不够；

2、获取通知权限 Notification.permission：

　　granted: //用户已经明确的授予了显示通知的权限。.

　　denied: //用户已经明确的拒绝了显示通知的权限。

　　default: //用户还未被询问是否授权; 这种情况下权限将视为 denied.

3、请求用户权限：

Notification.requestPermission()

requestPermission()方法接受一个回调函数；这个回调函数接受一个参数；即requestPermission()返回的 permission 状态；

4、完整的通知权限请求：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>

        <button onclick="notify()">点我查看</button>

    </div>

    <script>

//先检查浏览器是否支持

function notify(){

    if (!('Notification' in window)) {

        alert('你的浏览器不支持Notification')

    }

//检查是否拥有通知权限；有就通知，没有请求；

else if (Notification.permission=='granted') {

    var options={

        icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',

        body:'such a beautiful wolrld!'

    }

    var notification=new Notification('hello wolrld!',options);

}else if (Notification.permission !== 'denied'){

    Notification.requestPermission(

            function(permission){

                if (permission=='granted'){

                    var notification=new Notification('hello wolrld!');

                }

            }

        );

}

}

    </script>

</body>

</html>

需要注意的是；第一次需要申请权限；用户授权之后就能正常显示通知内容；用户如果忽视请求，再次点击会再次请求；用户选择拒绝，则浏览器会忽视，代码终止。

再次注意的是 ；Notification.requestPermission(callback)这种回调写法已经被弃用；取而代之的是基于promise的语法；其中js部分

//先检查浏览器是否支持

function notify(){

    if (!('Notification' in window)) {

        alert('你的浏览器不支持Notification')

    }

//检查是否拥有通知权限；有就通知，没有请求；

else if (Notification.permission=='granted') {

    var options={

        icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',

        body:'such a beautiful wolrld!'

    }

    var notification=new Notification('hello wolrld!',options);

}else if (Notification.permission !== 'denied'){

    Notification.requestPermission().then(function(result){

        if(result=='granted'){

            var notification=new Notification('hello wolrld!',options);

        }

    })

}

}

测试地址(火狐正常)

谷歌浏览器对于这种写法没有响应，火狐正常； 原因是http站点的安全性问题，需要将站点升级到HTTPS。

将站点升级到https站点后，测试谷歌浏览器正常，测试地址

MDN上有更多的实例属性和事件处理；参考链接

												


											
用于浏览器桌面通知的Web API 接口 -notification的更多相关文章
	

    
								
  1. Winform混合式开发框架访问Web API接口的处理
		
    在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...
    
		
    2. 
						
  2. 浏览器桌面通知--Notification
		
    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...
    
		
    3. 
						
  3. Http下的各种操作类.WebApi系列~通过HttpClient来调用Web Api接口
		
    1.WebApi系列~通过HttpClient来调用Web Api接口 http://www.cnblogs.com/lori/p/4045413.html HttpClient使用详解(java版本 ...
    
		
    4. 
						
  4. 浏览器桌面通知Notification实践
		
    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...
    
		
    5. 
						
  5. 浏览器桌面通知Notification探究
		
    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
    
		
    6. 
						
  6. Web API接口设计经验总结
		
    在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winfo ...
    
		
    7. 
						
  7. Web API接口 安全验证
		
    在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...
    
		
    8. 
						
  8. 浏览器桌面通知（notifications）
		
    近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了.经过查找发现有些浏览器能够使用noitfications.能够在桌 ...
    
		
    9. 
						
  9. Asp.Net Web Api 接口
		
    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 模板引擎（smarty）知识点总结II
			
    今天咱们继续来学习smarty!!! 知识点1:对于三种变量 常量的引用 有哪三种变量?a.assign赋值 b.系统保留变量(包括:$smarty.get,$smarty.post,$smarty. ...
    
			
    2. 
						
  2. 8.nginx防DDOS
			
    配置详解,查看链接:http://www.myhack58.com/Article/60/sort096/2015/59453.htm 配置文件: http {         #白名单        ...
    
			
    3. 
						
  3. 关于理解python类的小题
			
    今天看了python部落翻译的一篇<一道python类的小题>文章,感觉挺有启发性,记录下来: print('A') class Person(object): print('B') de ...
    
			
    4. 
						
  4. 微信小程序部署问题总结
			
    1.微信小程序免费SSL证书Https 申请(阿里云申请) 进入阿里云控制台后,选择CA证书服务 选择购买证书 但是阿里云的免费SSL证书藏得比较深,得这样操作才能显示出免费证书 点击Symantec ...
    
			
    5. 
						
  5. Java UDP实现聊天功能代码
			
    我以前经常写的是基于TCP的网络编程,由于TCP建立连接鼻血要经过三次握手连接,服务器端需要阻塞式等待客户端的连接.而UDP则是可以直接向目的地址的目的端口上发送数据包,由于它只负责发送出去就好,不管 ...
    
			
    6. 
						
  6. day 10 字符编码和文件处理   细节整理
			
    pycharm是文本编辑器. 大概理解为:  输出到屏幕上的时候,是解码过的字符串,用 decode 处理的时候要编码成相应的流, encode 成你要用的格式就可以了 1 .字符编码: 字符==== ...
    
			
    7. 
						
  7. Linux入门篇（一）——文件
			
    这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...
    
			
    8. 
						
  8. python编辑器pydev安装
			
    pydev实际上时eclipse的插件 1.安装eclipse(1)eclipse不需要安装,解压文件夹,点击eclipse.exe可使用 2.安装pydev (1) 解压pydev可看到featur ...
    
			
    9. 
						
  9. 从0到1搭建spark集群---企业集群搭建
			
    今天分享一篇从0到1搭建Spark集群的步骤,企业中大家亦可以参照次集群搭建自己的Spark集群. 一.下载Spark安装包 可以从官网下载,本集群选择的版本是spark-1.6.0-bin-hado ...
    
			
    10. 
						
  10. Java学习笔记3（数组）
			
    1.数组的定义: 第一种: public class ArrayDemo{ public static void main(String[] args){ //定义数组 int [] arr = ne ...
    
			
    11.