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. JS画几何图形之一【直线】
			
    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点  ...
    
			
    2. 
						
  2. Oracle数据库中插入日期型数据（to_date的用法）(转载)
			
    往Oracle数据库中插入日期型数据(to_date的用法) INSERT  INTO  FLOOR  VALUES  ( to_date ( '2007-12-20 18:31:34' , 'YYY ...
    
			
    3. 
						
  3. java.util.HashSet
			
    Operations Time Complexity Notes add, remove, contains, size O(1) assuming the hash functions has di ...
    
			
    4. 
						
  4. Thomas Hobbes: Leviathan
			
    Man is distinguished, not only by his reason, but by this singular passion from other animals, which ...
    
			
    5. 
						
  5. linux部署solr服务--小记
			
    1.将solr压缩包上传到web项目-solr文件夹下 2.解压solr-5.5.4.zip到当前文件夹下 linux 解压zip文件到当前目录 unzip filename.zip 提示没有unzi ...
    
			
    6. 
						
  6. JAVA 用数组实现 ArrayList
			
    我们知道 ArrayList 是一个集合,它能存放各种不同类型的数据,而且其容量是自动增长的.那么它是怎么实现的呢? 其实 ArrayList 的底层是用 数组实现的.我们查看 JDK 源码也可以发现 ...
    
			
    7. 
						
  7. ubuntu14 搭建单机版hadoop2.6
			
    1. 如果你的集群尚未安装所需软件,你得首先安装它们. 以Ubuntu Linux为例: $ sudo apt-get install ssh $ sudo apt-get install rsync ...
    
			
    8. 
						
  8. 【python3之变量，输入输出，判断，循环】
			
    一.python的基础语法和规则 1.变量 ①.变量的命名规则 语法: (下划线或字母)+(任意数目的字母.数字或下划线) 变量名必须以下划线或字母开头,而后面接任意数目的字母.数字或下划线.下划线分 ...
    
			
    9. 
						
  9. 再见乱码：5分钟读懂MySQL字符集设置
			
    一.内容概述 在MySQL的使用过程中,了解字符集.字符序的概念,以及不同设置对数据存储.比较的影响非常重要.不少同学在日常工作中遇到的"乱码"问题,很有可能就是因为对字符集与字符 ...
    
			
    10. 
						
  10. Maven构建项目比较慢的解决办法
			
    [前言] Intellij IDEA下Maven构建项目时,构建项目速度比较慢.需要等好久才能构建好一个项目,有时候一下午也还在提示进度. [问题描述] 使用Maven构建项目时: 设置好各种参数,然 ...
    
			
    11.