DIV CSS 佈局教程網

最近做的一個仿微信網頁版的站點，有一個新需求， 需要實現在新消息入線時，有桌面通知的效果，所以最近就稍微了解一下這個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>

Notify me!

其中：Notification.requestPermission 這句代碼的功能就是向用戶請求權限允許。

 

 

好吧，通過以上的例子，基本思路已經有了，首先加載文檔時，就向用戶請求權限，獲取權限後以後都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;
      }
    });
  }
});

火狐下 驗證是通過的，但是在chrome下總是出不來，後來發現這樣一段話

 

 

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

}