用于浏览器桌面通知的Web API 接口 -notification

notification 接口用于浏览器向用户提供通知内容;常见的如网页版的微信:

用于浏览器桌面通知的Web API 接口 -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。

用于浏览器桌面通知的Web API 接口 -notification

将站点升级到https站点后,测试谷歌浏览器正常,测试地址

MDN上有更多的实例属性和事件处理;参考链接

上一篇:jquery获取浏览器的高度和宽度


下一篇:SQL的积累