Click the button above,then it will send 3 notifications every five seconds in the lower right corner. MDN source | Expand source

			
window.addEventListener('load', function () {
	var s = $(".notification-status");
	var button = document.getElementsByTagName('button')[0];
	if(window.Notification && Notification.permission === "granted"){
		s.text('Granted');
	}else if(Notification.permission === "default"){
		s.text('Default');
	}else{
		s.text('Denied');
	}

	if (window.Notification && Notification.permission !== "granted") {
	    Notification.requestPermission().then(function(status) {
	    	//下面这一句不理解，明明是只读属性，为何要设置它呢？
	      	// if (Notification.permission !== status) {
	        //    Notification.permission = status;
	      	// }
	      	if(status === 'granted'){
	      		s.text('Granted');
	      	}else if(status === 'default'){
	      		s.text('Denied');
	      	}else if(status === 'denied'){
	      		s.text('Denied');
	      	}
	    });
	}

	button.addEventListener('click', function () {
	    // 如果用户同意就创建一个通知
		var j = 0;
	    if (window.Notification && Notification.permission === "granted") {
	    	setInterval(function(){
		      	for (let i = 0; i < 3; i++,j++) {
		            // Thanks to the tag, we should only see the "Hi! 9" notification
		            let options = {
		            	body:'This is the body!',
		            	icon:'https://lorempixel.com/200/200/people/?68317',
		            	// requireInteraction: true,
		            	data:{
		            		location_url:'https://lorempixel.com/200/200/people/?68317'
		            	}
		            };
		            let n = new Notification("Hi! " + j,options);
		            n.onshow = function () { 
					  	setTimeout(n.close.bind(n), 2000); 
					};
					n.onclick = function () {
						event.preventDefault(); // prevent the browser from focusing the Notification's tab
							window.open(options.data.location_url, '_blank');
					};
					n.onclose = function () {
						console.log(n.title,"closed");
					};
					n.addEventListener('error', function(errorMsg) {
				     	console.log('something went wrong:'+errorMsg);
				  	});
	          	}
	        },5000);
	    }

	    // 如果用户没有选择是否显示通知
	    // 注：因为在 Chrome 中我们无法确定 permission 属性是否有值，因此
	    // 检查该属性的值是否是 "default" 是不安全的。
	    else if (window.Notification && Notification.permission !== "denied") {
	      	Notification.requestPermission().then(function(status) {
		        // if (Notification.permission !== status) {
		        //   	Notification.permission = status;
		        // }
		        if(status === 'default'){
		      		s.text('Denied');
		      	}else if(status === 'denied'){
		      		s.text('Denied');
		      	}

		        // 如果用户同意了
		        if (status === "granted") {
		        	s.text('Granted');
			    	setInterval(function(){
				      	for (let i = 0; i < 3; i++,j++) {
				            let options = {
				            	body:'This is the body!',
				            	icon:'https://lorempixel.com/200/200/people/?68317',
				            	// requireInteraction: true,
				            	data:{
				            		location_url:'https://lorempixel.com/200/200/people/?68317'
				            	},
				            	tag:'Notification_tag'
				            };
				            let n = new Notification("Hi! " + j,options);
				            n.onshow = function () { 
							  	setTimeout(n.close.bind(n), 2000); 
							};
							n.onclick = function () {
								event.preventDefault(); // prevent the browser from focusing the Notification's tab
	  							window.open(n.data.location_url, '_blank');
							};
							n.onclose = function () {
								console.log(n.title,"closed");
							};
							n.onerror = function (errorMsg) {
								console.log('something went wrong:'+errorMsg);
							};
			          	}
			        },5000);
		        }

		        // 否则，我们可以让步的使用常规模态的 alert
		        else {
	         	 	alert("It was denied!");
		        }
	      	});
	    }

	    // 如果用户拒绝接受通知
	    else {
	      	// 我们可以让步的使用常规模态的 alert
	      	alert("It was denied!");
	    }
	});
});
$(function(){
	$('.notification-status').click(function(){
		var t = $(this);
		console.log(t.text());
		Notification.requestPermission().then(function(status) {
		  	if (status === 'denied') {
	  			t.text('Denied');
			    return;
		  	}
		  	if (status === 'default') {
		  		t.text('Default');
			    return;
		  	}
		  	// Do something with the granted permission.
		  	if (status === 'granted') {
		  		t.text('Granted');
			    return;
		  	}
			
		});
	});
});