Notification(流览器通知)
一、简介
Notifications API的Notification是用来给用户显示桌面通知信息的。Notification生成的消息是依附于浏览器的,与传统的通过写一个div定位到页面右下角显示的方式相比,这种方式不论是哪个页面推送的消息,用户不用切换到显示提示的页面就能看到。
二、Notification API
1、构造方法
var notification = new Notification(title, options);
-
title:一定会被显示的通知标题
-
options: (可选)一个被允许用来设置通知的对象,它包含以下属性:
- dir:文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
- lang:指定通知中所使用的语言
- body:通知中额外显示的字符串
- tag:赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除
- icon:一个图片的URL,将被用于显示通知的图标
2、属性
-
Notification.title:(moz only) 在构造方法中指定的 title 参数。[只读]
-
Notification.dir:通知的文本显示方向。在构造方法的 options 中指定。[只读]
-
Notification.lang:通知的语言。在构造方法的 options 中指定。[只读]
-
Notification.body:通知的文本内容。在构造方法的 options 中指定。[只读]
-
Notification.tag:通知的 ID。在构造方法的 options 中指定。[只读]
-
Notification.icon:通知的图标图片的 URL 地址。在构造方法的 options 中指定。[只读]
3、事件处理
-
Notification.onclick:处理 click 事件的处理。每当用户点击通知时被触发。
-
Notification.onshow:处理 show 事件的处理。当通知显示的时候被触发。
-
Notification.onerror:处理 error 事件的处理。每当通知遇到错误时被触发。
-
Notification.onclose:处理 close 事件的处理。当用户关闭通知时被触发。
4、方法
- 静态方法
Notification.requestPermission()
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
- 实例方法
Notification.close()
该方法用于关闭通知。
三、显示通知
通知的显示过程一般分为三个步骤:
- 检查浏览器是否支持Notification
- 检查浏览器的通知权限(是否允许通知),若权限不够则请求权限
- 创建并显示通知
Notification.requestPermission( function(status) {
console.log(status); // 仅当值为 "granted" 时显示通知
var n = new Notification("title", {body: "notification body"}); // 显示通知
});
Status的值类型
- default:用户还未被询问是否授权,所以通知不会被显示。
- granted:表示之前已经询问过用户,并且用户已经授予了显示通知的权限。
- denied:用户已经明确的拒绝了显示通知的权限。
可以通过检查只读属性 Notification.permission 的值来查看权限。
四、样例
- HTML
<!DOCTYPE HTML>
<html>
<head>
<meta chsrset="UTF-8"/>
<title>Notification</title>
<style>
#show{
padding: .5em 1.2em .4em .8em;
margin: .5em;
color: #336999;
cursor: pointer;
font-weight: bold;
background-color:#A8D7FF;
border-radius: 7em 1em / 5em 1em;
}
#show:hover{
background-color:rgba(128, 196, 255, .4);
}
#show:before{
font: 1.2em/0 sans-serif;
content: attr(data-icon);
margin-right: 8px;
}
</style>
</head>
<body>
<a id="show" data-icon="♥">显示通知</a>
</body>
</html>
- script
function showNotification(){
var notice = null,
options = {
body: "这是消息内容,是消息的详细信息!",
icon: "http://www.apache.org/images/SupportApache-small.png",
dir: "auto",
tag: "notificationId",
lang: "zh-CN"
};
//检测浏览器是否支持
if(!window.Notification){
alert("您的浏览器不支持桌面通知!");
return;
}
if(Notification.permission === "granted"){
//用户允许
notice = new Notification("这是消息的标题", options);
}else if(Notification.permission !== "denied"){//Chrome中无法确定permission是否有值,因此不能检测permission是否==="default"
//用户没有允许显示通知
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
if(status === "granted"){
notice = new Notification("这是消息的标题", options);
}else{
alert("您不允许显示通知!");
}
});
}else {
alert("您已拒绝接收推送消息!");
}
if(notice){
notice.onclick = function(e){
e.preventDefault();
window.open("https://www.baidu.com/");
};
notice.onshow = function(){
setTimeout(function(){
notice.close();
}, 5000);
};
}
}
document.querySelector("#show").addEventListener("click", showNotification, false);
- 效果:
Chrome中对通知的管理
chrome://settings/content/notifications
附:
更详细的资料以及浏览器兼容性等信息参考: https://developer.mozilla.org/zh-CN/docs/Web/API/notification