桌面提醒API之Notification
桌面通知功能能够让浏览器即使是最小化的状态,也能将消息通知给用户。 这和WebIM是最天然的组合,不过目前支持Desktop Notification功能的浏览器 只有Chrome5+,且弹出来的内容只能是文本,而不支持HTML。
在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:
- 收到多条消息时确保只出现一条通知;
- 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
- 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;
- 如何让用户点击通知浮动层即可定位到具体的聊天窗口
- 此外,还需要解决一个便利性问题
<script type="text/javascript">
const miao = 5;
function init() {
if (window.Notification) {
// 请求通讯许可
window.Notification.requestPermission();
}
}
function notify() {
var icon = "logo.png";
var title = "窗口将在 " + miao + " s后关闭";
var body = "欢迎关注微信公众号【qdgithub】";
if (window.Notification) {
// 检查通讯许可
if (window.Notification.checkPermission() == 0) {
// 创建通讯
var popup = window.Notification.createNotification(icon, title, body);
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, miao * 1000);
}
popup.show();
} else {
window.Notification.requestPermission();
return;
}
}
}
</script>
参考
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】