facebook like notification system

Facebook like Notification system




Hey guyz! in this post I am going to teach how to make a Facebook like notification system. For this purpose we will be using HTML5 Desktop Notification API, Now as days many website are using notification system like Pinterest, Gmail Facebook and many more. Note: Facebook does not use the same HTML5 Desktop Notification api but for simplicity we will be using HTML5 desktop notification api.



Facebook like Notification system

Browser Support

First ting first the browser support. The browser support isn’t that great and specially IE has fucked it up as always (Bhen chod IE Wale Apni gand mai ungli dal lo)

At 2 October 2015
At 2 October 2015

Markup HTML

There is nothing special in the markup(html) we only have 2 buttons One with #n_perm and #n_trigger. #n_perm will ask for permission for the notification and #n_trigger will show the notification

<button id="n_perm">Notification Permission</button>
<button id="n_trigger">Notification Trigger</button>

JavaScript

We are using core JavaScript No jQuery so do not close the browser window i will every thing line by line

  1. On line 1 & 2 we are getting a reference of #n_perm and #n_trigger into variables n_perm & n_trigger
  2. On line 4 we are Waiting for n_perm button to be clicked and as soon as the n_perm button is clicked we check if Desktop Notification is not available alert the user about it else on line 9 call notificationRequest(); function
  3. On line 14 we are waiting for n_trigger to be clicked and when its clicked we will make a variable var desktopNot;
  4. On line 20 we are checking for notification permission. If Notification.permission is default means user haven’t allowed or block the notification so we will ask call notificationRequest(); function ans ask for permission
  5. On line 22 if Notification.permission is equal to denied means user has block the notification request and we will alert the user about it
  6. if user get to line 24 means he has allowed notification so on line 26 we will make new Notification object and will store it in desktopNot variable which we have made earlier
  7. On line 32 we are waiting for notification to be clicked by the user. As soon as the notification is clicked by user we will send the user to ?notification= Url with this.tag as the unique id for notification, every notification should have a unique id
  8. On line 40 we will create notificationRequest(); function which will as for users permission on notifications
		var n_perm = document.getElementById("n_perm");
		var n_trigger = document.getElementById("n_trigger");

		n_perm.addEventListener("click", function(){
			//check notification is supported on your browser or not (IE Peoples)
			if(!window.Notification){
				alert("Desktop Notification are not supported.");
			}else{
				notificationRequest(); //request for desktop notification
			}
		});

		//trigger clicked
		n_trigger.addEventListener("click", function(){
			var desktopNot;

			console.log(Notification.permission);

			//check notification permission
			if(Notification.permission == "default"){
				notificationRequest(); //request for desktop notification
			}else if(Notification.permission == "denied"){
				alert("OOPS! You Blocked Desktop Notification. Please Allow to see the Demo");
			}else{
				//set a new 
				desktopNot = new Notification("You Have a new Notification",{
					body: "Facebook like desktop Notification system",
					icon: "icon.png",
					tag: '12345'
				});

				desktopNot.onclick = function(){
					window.location = "?notification="+this.tag;
				}
			}
		});


		// ask for desktop notification permission function
		function notificationRequest(){
			Notification.requestPermission(function(permission){
				//log the permission in the console
				console.log(permission);
				//when permission is granted
				if(permission == "granted"){
					alert("Hurrey! Desktop Notification Permission has been Allowed.");
				}else{
					alert("OOPS! You Blocked Desktop Notification. Please Allow to see the Demo");
				}
			});
		}

Putting it all together – Index.html

<!DOCTYPE html>
<html>
<head>
	<title>Facebook like Desktop Notification with HTML5</title>
</head>
<body style="background:#ccc;">
	<button id="n_perm">Notification Permission</button>
	<button id="n_trigger">Notification Trigger</button>


	<script type="text/javascript">
			var n_perm = document.getElementById("n_perm");
		var n_trigger = document.getElementById("n_trigger");

		n_perm.addEventListener("click", function(){
			//check notification is supported on your browser or not (IE Peoples)
			if(!window.Notification){
				alert("Desktop Notification are not supported.");
			}else{
				notificationRequest(); //request for desktop notification
			}
		});

		//trigger clicked
		n_trigger.addEventListener("click", function(){
			var desktopNot;

			console.log(Notification.permission);

			//check notification permission
			if(Notification.permission == "default"){
				notificationRequest(); //request for desktop notification
			}else if(Notification.permission == "denied"){
				alert("OOPS! You Blocked Desktop Notification. Please Allow to see the Demo");
			}else{
				//set a new notification
				desktopNot = new Notification("You Have a new Notification",{
					body: "Facebook like desktop Notification system",
					icon: "icon.png",
					tag: '12345'
				});

				desktopNot.onclick = function(){
					window.location = "?notification="+this.tag;
				}
			}
		});


		// ask for desktop notification permission function
		function notificationRequest(){
			Notification.requestPermission(function(permission){
				//log the permission in the console
				console.log(permission);
				//when permission is granted
				if(permission == "granted"){
					alert("Hurrey! Desktop Notification Permission has been Allowed.");
				}else{
					alert("OOPS! You Blocked Desktop Notification. Please Allow to see the Demo");
				}
			});
		}
	</script>
</body>
</html>

One thought on “Facebook like Notification system”

  1. Thanks for the auspicious writeup. It in truth was a leisure account it.
    Glance complicated to far introduced agreeable from you! However, how can we be in contact?

Leave a Reply

Your email address will not be published. Required fields are marked *