Adding Push Notification to Your Web App

A push notification is a message that is pushed from a back-end server to front end – usually displayed as a pop up alert on a desktop or mobile app. 

For a web application a push notification typically shows up on the bottom right hand corner of the browser window.

To show push notification your web app must get permission from the user. Once permission is granted, you can show notifications through your choice of events – button click, page load, ajax request etc.

if (Notification.permission) {
	// Good to go, you can create a notification.
	notification = new Notification("message from the app");
} else {
	Notification.requestPermission(function(){});
}

This is JavaScript code which checks for permission from the user, and if the permission is already granted then proceeds to create a new notification and shows message from the application.

Here is an example usage:

<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>
	<script>
		var notification;	
		
		jQuery(document).ready(function(){			
			
			$.get("data.html")
			.done(function(res){
				if (Notification.permission) {
					// Good to go, you can create a notification.
					notification = new Notification(res);
				} else {
					Notification.requestPermission(function(){});
				}
			});
			
		});
				
		
	</script>

Here i am using an ajax call to “data.html” which returns the content i want to show on the notification. The script runs on document ready event. But it can also be run on a button click, hover or any other event.