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. chattr 命令详解
			
    chattr   作用: 改变文件属性,这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有一下8种模式 模式: a: 让文件或目录仅供附加用途 b: 不更新文件或目录的最后存取时间  ...
    
			
    2. 
						
  2. c#加密解密源码，md5、des、rsa
			
    从网上找来的代码,顺手改改,用起来更方便. 配置文件 using System; using System.Collections.Generic; using System.Text; using  ...
    
			
    3. 
						
  3. centos7 yum 安装 redis
			
    //从中国科学技术大学开源镜像站 wget http://mirrors.ustc.edu.cn/epel/7/x86_64/Packages/e/epel-release-7-11.noarch.r ...
    
			
    4. 
						
  4. 三十天学不会TCP,UDP/IP网络编程-TraceRoute的哲学
			
    新年快乐,继续来部分粘贴复制我的这一系列文章啦,如果对和程序员有关的计算机网络知识,和对计算机网络方面的编程有兴趣,欢迎去gitbook(https://www.gitbook.com/@rogerz ...
    
			
    5. 
						
  5. 为Python添加中文关键字
			
    狗屎咖啡 2 个月前 原址: https://zhuanlan.zhihu.com/p/31159526 swizl/cnpython 1. 大部分语法,可以按下面方法加同义的中文token第1步.  ...
    
			
    6. 
						
  6. c# 调用python语言
			
    config   文件配置 <configuration>节中 第一个的位置插入如下节点,版本根据实际用到的来写 <configSections>    <section ...
    
			
    7. 
						
  7. C#  DataGridVie利用model特性动态加载列
			
    今天闲来无事看到ORm的特性映射sql语句.我就想到datagridview也可以用这个来动态添加列.这样就不用每次都去界面上点开界面填列了. 代码简漏希望有人看到了能指点一二. 先定义好Datagr ...
    
			
    8. 
						
  8. MySQL优化二  缓存参数优化
			
    数据库属于 IO密集型的应用程序,其主要职责就是数据的管理及存储工作.而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优化数 ...
    
			
    9. 
						
  9. SEO之网站关键词的优化 ：首页，内页关键字，长尾关键字
			
    这篇文章主要讲的是SEO之网站关键词的优化 :首页,内页关键字,长尾关键字. 为了查找方便,小A汇总了所有SEO优化的相关教程,方便大家查找到自己想要的SEO优化技巧: SEO优化教程汇总. 网站关键 ...
    
			
    10. 
						
  10. VBox 一款基于vue开发的音乐盒  序章
			
    己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudap ...
    
			
    11.