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. linux下制作镜像文件
			
    第一:制作iso镜像的方法: 把/dev/cdrom目录制作为镜像,名字为/root/rh1.iso 方法1:dd if=/dev/cdrom of=/root/rh1.iso 方法2:#cat /d ...
    
			
    2. 
						
  2. 4、树莓派的中文：安装ftp，安装gcc，安装qt，编译qt程序，运行qt界面程序
			
    本博文仅作本人操作过程的记录,留作备忘.自强不息 QQ1222698 1.安装FTP:sudo apt-get install vsftpd 2.配置FTP,修改,/etc/vsftpd.conf # ...
    
			
    3. 
						
  3. PHP函数和数组
			
    所有代码可以在https://www.github.com/lozybean/learn_www中查看 PHP函数 PHP中还是有很多函数式编程的影子,函数功能还是比较强大的. 1. 函数用funct ...
    
			
    4. 
						
  4. JSP EL隐含对象
			
    JSP 内置对象 JSP EL隐含对象 描述 page pageScope page 作用域 request requestScope request 作用域 session sessionScope ...
    
			
    5. 
						
  5. dotnet core 自定义配置文件
			
    首先添加一个.json 文件,比如 setting.json 文件内容如下,记得把文件设置为“复制到输出目录” { "ConfigSetting": { "XXXName ...
    
			
    6. 
						
  6. [js插件开发教程]定制一个手风琴插件(accordion)
			
    本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
    
			
    7. 
						
  7. TSLint提示错误
			
    要成为优秀的TS开发人员,必须直接禁用TS的不良特性. 为此,道爷亲自操刀编写了TSLint工具,用来分析我们的TS代码,把潜在的Bug和不良代码全部找出来. 目的是为了保证TS的质量,但是存在的问题 ...
    
			
    8. 
						
  8. word-break: break-word;   文本溢出
			
    word-break: break-word; 中文汉字不会溢出,英文字母会溢出 这个时候添加属性 word-break: break-word;   即可 使得  不溢出     ========  ...
    
			
    9. 
						
  9. Sequelize 基本操作
			
    Sequelize 是 Node 的一个 ORM(Object-Relational Mapping) 框架,用来方便数据库操作. 配置 sequelize 以 mysql 为例 首先我们要引入npm ...
    
			
    10. 
						
  10. Android studio签名与代码混淆
			
    签名: 应用程序升级:应用程序模块化:代码或者数据共享 混淆:混淆器将代码中的所有变量.函数.类的名称变为简短的英文字母代号,而混淆后的代码很难被反编译,即使反编译成功也很难得出程序的真正语义.
    
			
    11.