特点
可以直接脱离浏览器，在桌面提醒（类似微信及系统提醒）。
不能直接本地运行，需要服务器
需要用户允许方可使用
win系统提醒在右下角，mac提醒在右上角
浏览器兼容性
Firefox （支持）
Chorome （支持）
Safari （支持）
Opera （支持）
IE （全军覆没）
移动端 （几乎全军覆没）
应用场景
社交类网站
资讯类网站
网页版邮件服务
即时通知类网站
...
判断浏览器是否支持桌面提醒
if(window.Notification){
console.log("浏览器支持Notification");
// 业务代码
}else{
console.log("浏览器不支持Notification");
}
判断用户允许状态
Notification.permission取值为一下三个值
"granted" 用户曾经同意接受通知
"default" 用户还未选择，可以询问用户是否同意发送通知
"denied" 用户曾经拒绝显示通知
if(Notification.permission === 'granted') {
console.log('用户曾经同意接受通知');
}else if(Notification.permission === 'default'){
console.log('用户还未选择，可以询问用户是否同意发送通知');
}else{
console.log('用户曾经拒绝显示通知');
}
询问用户是否同意发送通知
Notification.requestPermission() 返回是一个promise
"granted" 用户同意授权
"default" 用户关闭授权 未刷新页面之前 可以再次请求授权
"denied" 用户拒绝授权 不能显示通知
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('用户同意授权');
var notification = new Notification(title, options); // 显示通知
} else if (permission === 'default') {
console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
} else {
// denied
console.log('用户拒绝授权 不能显示通知');
}
});
显示通知方法
new Notification(title, options)
title 是必须参数，表示推送消息框的标题内容
options 是可选参数 是一个对象 一下是常用选项
{
dir: 水平展示顺序 默认'auto'，可以是ltr或rtl
lang：提示的语言
bady：提示消息的主体内容
tag：标记当前通知的标签
icon：左边的显示头像或者图标
silent：通知是否静音。非必须，默认为false，表示无声
sound: 'mp3',通知声源文件地址。非必须，默认为空
noscreen: 是否不在屏幕上显示通知信息。非必须，默认为false表示要显示
renotify：是否替换之前的通知项
timestamp: 通知显示延迟的时间。非必须，默认通知实例创建完成就显示
data: 可以是任意数据类型 通常用于方法的回调，传参
requireInteraction false自动关闭，true不自动关闭保持活性，默认为false
}
const n = new Notification('XX网站消息通知', {
body: '你的朋友有新状态啦，快去围观吧！',
tag: 'testTag',
icon: 'https://static.cnblogs.com/images/adminlogo.gif',
requireInteraction: true // 不自动关闭通知
});
事件及事件钩子
Notification.onclick
处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow
处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror
处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose
处理 close 事件的处理。当用户关闭通知时被触发。
n.onshow = function () {
console.log('通知显示了！');
}
n.onclick = function (e) {
// 可以直接通过实例的方式获取data内自定义的数据
// 也可以通过访问回调参数e来获取data的数据
window.open(n.data.url, '_blank');
n.close();
}
n.onclose = function () {
console.log('关闭了！！');
}
n.onerror = function (err) {
console.log('出错了，检查一下吧');
throw err;
}
最后一个完整的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5桌面通知</title>
</head>
<body>
<button id="btnNotify">点我模拟收到桌面通知</button>
<p id="text" style="color: orange"></p>
<script>
var btnNotify = document.getElementById('btnNotify');
var text = document.getElementById('text');
const NotificationInstance = Notification || window.Notification;
NotificationInit();
btnNotify.onclick = function() {
NotificationInit();
}
// 初始化
function NotificationInit(){
if (NotificationInstance) {
const permissionNow = NotificationInstance.permission;
//允许通知
if (permissionNow === 'granted') {
CreatNotification();
} else if (permissionNow === 'denied') {
text.innerHTML = '用户之前拒绝了桌面提醒!';
} else {
setPermission();
}
}else{
alert("浏览器不支持Notification");
}
}
//请求获取通知权限
function setPermission() {
NotificationInstance.requestPermission(function (PERMISSION) {
if (PERMISSION === 'granted') {
CreatNotification();
} else {
text.innerHTML = '用户拒绝了你!';
}
});
}
function CreatNotification() {
const n = new Notification('XX网站消息通知', {
body: '你的朋友有新状态啦！',
tag: 'testTag',
icon: 'https://gitee.com/yinuocode/blogsImg/raw/master/img/avatar.jpg',
data: {
url: 'https://yuanqiao.pw'
},
requireInteraction: true // 不自动关闭通知
});
n.onshow = function () {
text.innerHTML = '通知显示了！';
}
n.onclick = function (e) {
window.open(n.data.url, '_blank');
n.close();
}
n.onclose = function () {
text.innerHTML = '关闭了！';
}
n.onerror = function (err) {
text.innerHTML = '出错了！';
throw err;
}
}
</script>
</body>
</html>
发表评论：