用于浏览器桌面通知的Web API 接口 -notification
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上有更多的实例属性和事件处理；参考链接
