桌面提醒API之Notification

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/my_study_everyday/article/details/86530907

桌面通知功能能够让浏览器即使是最小化的状态，也能将消息通知给用户。
这和WebIM是最天然的组合，不过目前支持Desktop Notification功能的浏览器
只有Chrome5+，且弹出来的内容只能是文本，而不支持HTML。

在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：

1. 收到多条消息时确保只出现一条通知;
2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
3. 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于Focus状态将不出现通知;
4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口
5. 此外，还需要解决一个便利性问题

<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>

参考

• MDN-Notification