Notifications are very essential part of web application. Sending Notification to user, assist the user staying informed.with latest updates. JavaScript Notifications API enables web pages to display messages to users on their devices across different platforms.
These notifications (also called system or desktop messages) can be used to notify the user about important events such as an email, new social media message, live chat notification, calendar reminders, etc.
In this blog we are going to learn how can we enable notification in our application, How can we check our application support notification API or not.
Prerequested:
Basic Knowledge of JavaScript.
Browser Support:
To make sure browser supported or not for Notification API, You can simply do this by checking if the window object has a property called Notification:
if (!window.Notification) {
console.log('Browser does not support notifications.')
} else {
// Add logic to show notification here
}
After identifying the Browser supported the browser, we need to check for permissions.
Request Permissions:
Before diving into more let me tell you one more thing.
SSL certificate required to use Notification API in your website. It does not work on insecure origins (HTTP).
For check permissions, Notification APi provide us a facility to check by Notification.permission. For learn Angular Frame work check Angular learning.
There are 3 state of Notification.permission:
- granted : Notifiaction are allowers by the user.
- default : User has not decided to get notification.
- denied : Notification are not allowed by the user.
For the first time you can ask for permission by using requestPermission method of Notification API.
It will open a popup message to ask the user to allow or block notifications from this site. Once the user has made a choice, the setting will be saved for the current session.
Let’s check by code , How can we ask for permission.
if (!window.Notification) {
console.log('Browser does not support notifications.')
} else {
// check if permission is already granted
if (Notification.permission === 'granted') {
// show notification here
} else {
// request permission from the user
Notification.requestPermission()
.then(function (permission) {
if (permission === 'granted') {
// show notification here
} else {
console.log('User blocked notifications.')
}
})
.catch(function (err) {
console.error(err)
})
}
}In the above code will the Notification.requestpermission() method and getting the user response. requestPermission() method is promise.
Let’s Show Notifications
To show notification, It’s very simple, let’s understand this by code.
Notifications are only possible if user granted the permission otherwise we can not send notification to user. So if user granted the permission then , we simply so notification by below code by Notification API.
const message = new Notification('Hii User , welcome to our site!')It’s not limited to text , we can set icon , body text, sound, we need to pass an options object to specify text direction, body text, an icon to display, notification sound to play, and more.
Let’s Put everything together.
Create notification.js file and add below code
function notification(){
if(!window.Notification){
confirm('Notification Not supported by this Broweser');
} else {
if(Notification.permission == 'granted'){
const notify = new Notification('Hi XYZ User!', {
body: 'We have Something new for you?',
icon: 'https://bit.ly/2DYqRrh'
})
} else {
Notification.requestPermission().then( (response)=>{
if(response == 'granted'){
const notify = new Notification('Hi XYZ User!', {
body: 'We have Something new for you?',
icon: 'https://bit.ly/2DYqRrh'
})
} else {
console.log("Notification Blocked by User");
}
}).catch(function (err) {
console.error(err);
})
}
}
}Attach JS file to html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./notification.js" async></script>
<link rel="stylesheet" href="./style.css" />
<title>Notification</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
div{
padding: 10px;
border: 2px double black;
border-radius: 10px;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
width: 200px;
height: 50px;
background-color:transparent;
border: 1px solid black;
border-radius: 10px;
}
button:hover {
transform: scale(1.1);
transition: 0.5s all;
box-shadow: 10px 4px 3px 0px rgba(black,0.5);
}
button:active{
transform: scale(0.9);
transition: 0.5s all;
box-shadow: 10px 4px 3px 0px rgba(black,0.5);
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px">
<span>By Clicking the Send Notification button you can send your self notification</span>
<button onclick="notification()">Send Notification</button>
</div>
</body>
</html>
let’s wrap it up
Notifications are heart of every application. Updating subscribed user about new updates is requirement of every application. By using Notification API we easily send notifications. By follow the above code you can simply add send notification feature in you app.
Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.
