HTML 5 Notification消息通知DEMO示例

最新推荐文章于 2021-09-08 19:08:24 发布

iteye_11495

最新推荐文章于 2021-09-08 19:08:24 发布

阅读量863

点赞数 1

文章标签： javascript 网络 ViewUI

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"
};

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

检查浏览器是否支持Notification
检查浏览器的通知权限（是否允许通知）
若权限不够则获取浏览器的通知权限
创建消息通知
展示消息通知

<!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容器内，切记。
消息通知是个不错的特性，可是也不排除有些站点恶意的使用这个功能，一旦用户授权之后，不时的推送一些不太友好的消息，打扰用户的工作，这个时候我们可以移除该站点的权限，禁用其消息通知功能。我们可以依次点击设置打开设置的选项卡，然后点击底部的显示高级设置，在隐私一项中点击内容设置，最后会弹出一个内容面板，向下滑动找到消息通知一项，如何更改，想必就不用多说了。

iteye_11495

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 Notification消息通知DEMO示例

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

扫一扫