HTML 5 Notification消息通知DEMO示例

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guoquanyou/article/details/51726571

       Web Notifications是HTML5中一个令人欣喜的新特性,它支持开发者配置和显示桌面通知,为用户提供更好的体验,最令人称赞的是,即使用户忙于其他工作时也可以收到来自页面的消息通知,例如一个新邮件的提醒,或者一个在线聊天室收到的消息提醒等等。

      关于Notification的Constructor定义如下:

[Constructor(DOMString title, optional NotificationOptions options)]
interface Notification : EventTarget {
  static readonly attribute NotificationPermission permission;
  static void requestPermission(optional NotificationPermissionCallback callback);

  attribute EventHandler onclick;
  attribute EventHandler onshow;
  attribute EventHandler onerror;
  attribute EventHandler onclose;

  readonly attribute DOMString title;
  readonly attribute NotificationDirection dir;
  readonly attribute DOMString lang;
  readonly attribute DOMString body;
  readonly attribute DOMString tag;
  readonly attribute DOMString icon;

  void close();
};

dictionary NotificationOptions {
  NotificationDirection dir = "auto";
  DOMString lang = "";
  DOMString body;
  DOMString tag;
  DOMString icon;
};

enum NotificationPermission {
  "default",
  "denied",
  "granted"
};

callback NotificationPermissionCallback = void (NotificationPermission permission);

enum NotificationDirection {
  "auto",
  "ltr",
  "rtl"
};

一个桌面通知生成的正常流程

  1. 检查浏览器是否支持Notification
  2. 检查浏览器的通知权限(是否允许通知)
  3. 若权限不够则获取浏览器的通知权限
  4. 创建消息通知
  5. 展示消息通知
<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket测试</title>
</head>
<script type="text/javascript">
	var NotificationHandler = {
		isNotificationSupported : 'Notification' in window,
		isPermissionGranted : function() {
			return Notification.permission === 'granted';
		},
		requestPermission : function() {
			//验证浏览器是否支持Notification,如果不支持打印提示信息并返回
			if (!this.isNotificationSupported) {
				console.log('当前浏览器不支持Notification API');
				return;
			}
			//该方法将会询问用户是否允许显示通知,不能由页面调用(onload),必须由用户主动事件触发(onclick等)
			//当用户同意之后,再次调用该方法则无效,即该方法仅对Notification.Permission不为'granted'的时候起作用
			Notification.requestPermission(function(status) {
				//status是授权状态,如果用户允许显示桌面通知,则status为'granted'  
				console.log('status: ' + status);
				//permission只读属性:  
				//	default 用户没有接收或拒绝授权 不能显示通知  
				//	granted 用户接受授权 允许显示通知  
				//	denied  用户拒绝授权 不允许显示通知  
				var permission = Notification.permission;
				console.log('permission: ' + permission);
			});
		},
		showNotification : function() {
			if (!this.isNotificationSupported) {
				console.log('当前浏览器不支持Notification API');
				return;
			}
			if (!this.isPermissionGranted()) {
				console.log('当前页面未被授权使用Notification通知');
				return;
			}

			var n = new Notification("您有一条新消息", {
				icon : 'cat.jpg',
				body : '请五分钟后到老总办公室领取本年度奖金!'
			});

			//onshow函数在消息框显示时会被调用  
			//可以做一些数据记录及定时操作等  
			n.onshow = function() {
				console.log('显示通知信息');
				//5秒后自动关闭消息框  
				setTimeout(function() {
					n.close();
				}, 5000);
			};

			//消息框被点击时被调用  
			//可以打开相关的视图,同时关闭该消息框等操作  
			n.onclick = function() {
				alert('打开相关视图');
				//opening the view...  
				n.close();
			};

			//当有错误发生时会onerror函数会被调用  
			//如果没有granted授权,创建Notification对象实例时,也会执行onerror函数  
			n.onerror = function() {
				console.log('产生错误');
				//do something useful  
			};

			//一个消息框关闭时onclose函数会被调用  
			n.onclose = function() {
				console.log('关闭通知窗口');
				//do something useful  
			};
		}
	};
	//此处无效,不能由页面调用(onload)
	document.addEventListener('load', function() {
		NotificationHandler.requestPermission();
	});
	setTimeout(function() {
		//if there has new mail, show notification  
		NotificationHandler.showNotification();
	}, 3000);
</script>
<body>
	<button οnclick="NotificationHandler.showNotification()">show
		notification</button>
</body>
</html>
当页面在服务器上运行时,产生以下效果:


      需要注意的是,消息通知只有通过Web服务访问该页面时才会生效,如果直接双击打开本地文件,是没有任何效果的。所以在平时做练习的时候也需要把文件目录放进Web容器内,切记。
      消息通知是个不错的特性,可是也不排除有些站点恶意的使用这个功能,一旦用户授权之后,不时的推送一些不太友好的消息,打扰用户的工作,这个时候我们可以移除该站点的权限,禁用其消息通知功能。我们可以依次点击设置打开设置的选项卡,然后点击底部的显示高级设置,在隐私一项中点击内容设置,最后会弹出一个内容面板,向下滑动找到消息通知一项,如何更改,想必就不用多说了。

展开阅读全文

没有更多推荐了,返回首页