共计 3720 个字符,预计需要花费 10 分钟才能阅读完成。
在开发一个 Web 利用零碎或者一个网站时,当用户触发了某个事件,或者零碎想告诉用户某个事件,比方有一条新的音讯、其他人点赞或者评论了文章、零碎流程被审核通过了等等诸如此类的场景,通常可能会想到 利用内告诉 的形式,然而这种形式有一个局限,就是如果用户切换到浏览器其余页签或者其余应用程序时,可能无奈及时看到利用零碎的告诉,那么这个时候就能够借助于浏览器的 Notification 告诉性能了。
1、什么是浏览器的 Notification?
Notification 是浏览器提供的一种容许网页向用户显示零碎告诉的机制,这种零碎告诉是在顶级浏览上下文视口之外,因而即便用户曾经切换标签页或挪动到不同的应用程序,也能够显示,并且 Notification 相干的 API 被设计成与不同平台上的现有告诉零碎兼容。
首先来看看浏览器的 Notification 告诉是什么样的,这里以 SegmentFault 网站为例,只有有新用户关注或者文章被点赞珍藏,SegmentFault 网站都会主动发送 Notification 告诉(能看到告诉的前提是要容许网站发送告诉),具体告诉如下:
除了 SegmentFault 网站外,还能够看看网页版微信的零碎告诉,也是相似的。
2、如何应用 Notification?
要显示一个零碎告诉,个别须要分成两步:用户授予显示告诉的权限 、 发送零碎告诉。
(1)用户授予显示告诉的权限
零碎要给用户发送告诉,如果用户不想查看这个告诉,即没有授予相应的权限,那么即便告诉收回了,用户也是无奈看到的。
如何向用户询问是否容许查看零碎告诉的权限呢?能够应用上面的办法
Notification.requestPermission()
该办法的返回值有三个:granted、denied、default,最新的标准已将此办法更新为基于 promise 的语法,工作原理如下:
Notification.requestPermission().then(function(permission) {...});
上面来看一个具体的实例,在 localhost 上询问显示零碎告诉的权限,依据不同的抉择后果,打印相应的日志信息,代码如下:
Notification.requestPermission().then(function(result) {if (result === 'denied') {console.log('回绝显示零碎告诉');
return;
}
if (result === 'default') {console.log('默认');
return;
}
console.log('容许显示零碎告诉')
});
按下 F12,关上 Chrome 的控制台,复制下面的代码
运行后,能够看到浏览器会弹出一个询问框,如下:
不同的抉择,控制台会输入不同的后果
- 容许 :控制台会输入 容许显示零碎告诉,如果抉择了容许,再次申请权限时,不会再弹出抉择框,而是在控制台间接输入容许显示零碎告诉;
- 禁止 :控制台会输入 回绝显示零碎告诉,如果抉择了回绝,再次申请权限时,不会再弹出抉择框,而是在控制台间接输入回绝显示零碎告诉;;
- x 敞开 :控制台会输入 默认,如果间接敞开了,再次申请权限时,仍然会弹出抉择框;
抉择【容许】后,此时再点击地址栏的信息按钮,能够看到告诉已开启了,如下:
如果不想显示告诉了,能够间接在此处敞开告诉即可,也能够应用上面的语句来查看以后用户的受权状况,如下:
Notification.permission
运行后,输入后果
'granted'
(2)发送零碎告诉
当用户容许显示零碎告诉后,就能够发送告诉了,这时能够应用 Notification() 构造函数创立一个新告诉,这个办法能够传入两个参数,具体如下:
title(必传)
- 定义一个告诉的题目,当它被触发时,它将显示在告诉窗口的顶部。
options(可选)
options 对象蕴含利用于告诉的任何自定义设置选项,罕用的选项有:
dir
: 文字的方向;它的值能够是auto(主动)
,ltr(从左到右)
, orrtl
(从右到左);lang
: 指定告诉中所应用的语言。这个字符串必须在 BCP 47 language tag 文档中是无效的;body
: 告诉中额定显示的字符串;tag
: 赋予告诉一个 ID,以便在必要的时候对告诉进行刷新、替换或移除;icon
: 一个图片的 URL,将被用于显示告诉的图标;
除了上述 5 个罕用选项外,还有其余的 badge、image、data、vibrate、renotify、requireInteraction 等,具体可查看官方网站的介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Notification
上面来测试一个简略的告诉,代码如下:
let notification = new Notification('有一条新告诉');
这个告诉只有题目,运行后,能够看到
减少一些 options 选项,再次来测试一下零碎告诉,批改后的代码如下:
let notification = new Notification('有一条新告诉', {
dir: 'ltr',
lang: 'zh-CN',
body: '告诉的注释内容:你的销假流程已批准',
icon: 'http://localhost/coder/favicon.ico'
});
运行后,能够看到告诉如下
(3)告诉事件
Notification 告诉有四种事件,能够通过监听告诉事件来执行不同的操作,具体事件如下:
- Notification.onclick:对 click 事件的解决,每当用户点击告诉时被触发;
- Notification.onshow:对 show 事件的解决,当告诉显示的时候被触发;
- Notification.onerror:对 error 事件的解决,每当告诉遇到谬误时被触发;
- Notification.onclose:对 close 事件的解决,当用户敞开告诉时被触发。
上面来测试一下告诉事件的监听,代码如下:
let notification = new Notification('有一条新告诉', {
dir: 'ltr',
lang: 'zh-CN',
body: '告诉的注释内容:你的销假流程已批准',
icon: 'http://localhost/coder/favicon.ico'
});
// 监听告诉显示事件
notification.onshow = () => console.log('告诉已显示');
// 监听告诉点击事件
notification.onclick = () => console.log('告诉被点击');
// 监听告诉被敞开事件
notification.onclose = () => console.log('告诉被敞开');
// 监听告诉谬误事件
notification.onerror = () => console.log('告诉呈现谬误');
运行时,控制台会间接输入如下信息
告诉已显示
点击告诉时,会输入
告诉被点击
当告诉敞开时,会输入
告诉被敞开
3、发送 Notification 告诉代码
联合下面的介绍,上面给出发送告诉的参考代码,具体如下:
function sendNotification(title, body, icon, callback) {
// 先查看浏览器是否反对
if (!('Notification' in window)) {
// IE 浏览器不反对发送 Notification 告诉!
return;
}
if (Notification.permission === 'denied') {
// 如果用户已回绝显示告诉
return;
}
if (Notification.permission === 'granted') {
// 用户已受权,间接发送告诉
notify();} else {
// 默认,先向用户询问是否容许显示告诉
Notification.requestPermission(function(permission) {
// 如果用户批准,就能够间接发送告诉
if (permission === 'granted') {notify();
}
});
}
function notify() {
let notification = new Notification(title, {
icon: icon,
body: body
});
notification.onclick = function() {callback && callback();
console.log('单击告诉框')
}
notification.onclose = function() {console.log('敞开告诉框');
};
}
}
上面来测试一下:
sendNotification('上班告诉', '明天周五,还有十分钟上班', 'http://localhost/coder/favicon.ico');
运行后,告诉的成果如下:
参考资料:
- https://developer.mozilla.org/zh-CN/docs/Web/API/notification
- https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API