1. 程式人生 > >前端js實現桌面通知

前端js實現桌面通知

前端js實現桌面通知 前端js實現桌面通知,思路是呼叫Notification物件,先檢測使用者是否授權桌面顯示,若授權則進行顯示,若不授權則不顯示。 在Notification物件中常用的屬性有title(桌面通知標題)、body(桌面通知的主體內容,注意不對html進行轉義,只是字串)、icon(桌面通知左邊的logo)、dir(主體內容的水平書寫順序)。 Notification有onclick事件、onerror事件、onshow事件、close()事件。可以使用setInterval或者setTimeout定時器對桌面通知的消失事件進行操控,可在其他的事件中對桌面通知進行互動。

本次實現的是頁面初始化的時候請求使用者是否允許顯示桌面通知,若允許則顯示,若不允許則不顯示。在顯示桌面通知後,使用者可手動關閉,若使用者不關閉,則5秒鐘之後自行關閉,當用戶點選桌面通知時實現開啟當前頁面並重新整理。
可以直接執行的程式碼
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		測試桌面通知,視窗小化效果更好。
	</body>
	<script type="text/javascript">
   	document.addEventListener('DOMContentLoaded',function(){
		if(! ('Notification' in window) ){
		alert('Sorry bro, your browser is not good enough to display notification');
		return;
		}	
		Notification.requestPermission(function(permission){
			var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'',dir:'auto'});
			setTimeout(function() {
			    notification.close();//關閉桌面通知
			}, 5000);
			notification.onclick = function(){
				//點選桌面通知,模擬實現把使用者小化的視窗大化並重新整理
				notification.close();//關閉桌面通知
				var href = window.location.href;//獲取當前頁面的url
				window.close();//將當前頁面關閉
				window.open(href);//新開一個頁面,url為當前頁面
			}
			navigator.onerror = function(){
				//當有錯誤發生時會onerror函式會被呼叫
				console.log('桌面通知發生了錯誤');
			}
			navigator.onshow = function(){
				//訊息框顯示時會被呼叫
				console.log('桌面通知顯示ing');
			}
		});
	});
	</script>
</html>