html5 Web Notifications

最近做的一个仿微信网页版的站点，有一个新需求， 需要实现在新消息入线时，有桌面通知的效果，所以最近就稍微了解一下这个html5的新属性。

这边有个不错的demo：html5 web notification demo

从上面这个demo中 我们就可以获取所需要的基本核心代码，如下：

<script>
	var Notification = window.Notification || window.mozNotification || window.webkitNotification;

	Notification.requestPermission(function (permission) {
		// console.log(permission);
	});

	function show() {
		var instance = new Notification(
			"test title", {
				body: " test message"
			}
		);

		instance.onclick = function () {
			// Something to do
		};
		instance.onerror = function () {
			// Something to do
		};
		instance.onshow = function () {
			// Something to do
		};
		instance.onclose = function () {
			// Something to do
		};

		return false;
	}
</script>

<a href="#" onclick="return show()">Notify me!</a>

好吧，通过以上的例子，基本思路已经有了，首先加载文档时，就向用户请求权限，获取权限后以后都so easy了。

window.addEventListener('load', function () {
  // At first, let's check if we have permission for notification
  if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }
});

Not a Bug, Feature.

Desktop Notifications can only be triggered via a user action.  Typing into the 
JavaScript console has the same effect as raw javascript code embedded into the web 
page (no user action).  Typing the javascript into the location bar, however, 
represents a user-action (the user is intentionally visiting a javascript link to 
enable notifications, probably for sites that tend to use href="javascript:" instead 
of onclick="".

I‘m pretty sure this is a non-issue.

原来在chrome下是必须要用户手动触发的，否则，chrome浏览器会无视这段的js

但是在我们网站里肯定不可能加一个按钮或者超链接来显式的让用户授权吧，好吧， 实际上这也不是个事情，我们可以在用户经常点的按钮上顺便处理下这个授权就好，在chrome下是一次授权终身有用。除非你进入设置把他禁了。

整合一下，如下

function showMsgNotification(title, msg){
	var Notification = window.Notification || window.mozNotification || window.webkitNotification;
	
	if (Notification && Notification.permission === "granted") {
		var instance = new Notification(
				title, {
				body: msg,
				icon: "image_url"
			}
		);

		instance.onclick = function () {
			// Something to do
		};
		instance.onerror = function () {
			// Something to do
		};
		instance.onshow = function () {
			// Something to do
//			console.log(instance.close);
			setTimeout(instance.close, 3000); 
		};
		instance.onclose = function () {
			// Something to do
		};
	 }else if (Notification && Notification.permission !== "denied") {
	      Notification.requestPermission(function (status) {
	          if (Notification.permission !== status) {
	            Notification.permission = status;
	          }
	          // If the user said okay
	          if (status === "granted") {
	        	  var instance = new Notification(
	      				title, {
		      				body: msg,
		      				icon: "image_url"
	      				}
	      			);

	      			instance.onclick = function () {
	      				// Something to do
	      			};
	      			instance.onerror = function () {
	      				// Something to do
	      			};
	      			instance.onshow = function () {
	      				// Something to do
	      				setTimeout(instance.close, 3000); 
	      			};
	      			instance.onclose = function () {
	      				// Something to do
	      			};
	      			
	          }else {
	        	  return false
	          }
	        });
	  }else{
		  return false;
	  }

}

html5 Web Notifications,古老的榕树,5-wow.com