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. css各种布局
			
    1.水平居中 前提:父容器.parent 和子容器.child 1)使用text-align和inline-block .parent{text-aling:center}; .child {disp ...
    
			
    2. 
						
  2. Io 异常: The Network Adapter could not establish the connection
			
    新接触一个项目,导入源码,在本地启动的时候后台报了一个错误: Could not discover the dialect to use. java.sql.SQLException: Io 异常:  ...
    
			
    3. 
						
  3. Java基础之引用（String，char[]，Integer）总结
			
    1.String的引用: 下列代码执行后的结果为: public class Test { public static void main(String[] args) { StringBuffer  ...
    
			
    4. 
						
  4. VIM常见用法总结
			
    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
    
			
    5. 
						
  5. MVC WebAPI自动生成帮助文档(转)
			
    注意点: 1.mvc的控制器必须继承于ApiController,否则看不到的 2. 简单查看xml,根据第二步即可生成xml,可视感比较低,但是内容全部有,不限定于Api 以下为转载正文 ===== ...
    
			
    6. 
						
  6. PHP 微信分享页面（图文）
			
    首先确保你的公众号配置没有问题,详细请看: PHP 微信公众号-创建菜单-配置 1.获取签名包 这里需要你的appid 和 开发者密码 //获取签名包 public function getSignP ...
    
			
    7. 
						
  7. python_第2课
			
    前言 回顾一下python+selenium基础,并整理相关知识点,分享给有需要,在前进道路上的朋友. 由于不是在python中敲的代码,有可能有缩进等相关错误,请自行检查 数据类型 #python中 ...
    
			
    8. 
						
  8. 如何在MicroPython TPYBoard 添加自定义类库
			
    开始之前,首先要感谢一下TPYBoard技术交流群(157816561)-云之初晓网友的分享.   今天简单分享下如何将自己编写的一些Python脚本的类库添加到固件中,在使用时只需import调用, ...
    
			
    9. 
						
  9. 多行文字水平垂直居中在div
			
    <BODY>   <div class="box">    <h3>1.单行文字居中</h3>    <!--设置行高来实现- ...
    
			
    10. 
						
  10. RGB颜色 对照表
			
      来自为知笔记(Wiz)
    
			
    11.