JavaScript Notification

The JavaScript notification function shows the desktop notifications to users using the Notification API. We can use it to know the message or information of the functionality of JavaScript.

Permissions for Notifications

The Notification API strongly enforces two security aspects by default. JavaScript can easily exploit it.
Firstly, we can consent to receiving the notifications for each javascript origin.
Second, the notifications can be sent by code to execute in a secure context (HTTPS).
Users have the option of accepting or rejecting your request for their consent. It notifies the user or developer.
Browsers are going to recall the decision if users explicitly reject it. We cannot get another chance to ask for approval.
We may repeatedly forward a request to the notification permission if users ignore it or disagree with it.

Examples

The javascript notification shows the notification or error information using the JavaScript API.

Example 1:

The given example shows the output if the notification is accepted. The notification permission is set as true.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://www.javatpoint.com/', '_blank');
});
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We access the given websites notifications';
}
// show an error_info message
const showMistake = () => {
}
//Check the given notification permission
let notification_grant = true;
if (Notification.permission === 'notification_grant') {
notification_grant = false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
</script>
</body>
</html>

Output

The following image gets the notification information.

Example 2:

The given example shows the output if notification of the false. The notification permission is set as false.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://www.javatpoint.com/', '_blank');
});
}
// show an error_info message
const showMistake = () => {
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We block the given websites notifications';
}
//Check the given notification permission
let notification_grant = false;
if (Notification.permission === 'notification_grant') {
notification_grant = false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
alert(notification_grant);
</script>
</body>
</html>

Output

The following image gets the notification information.

Example 3:

The given example shows the output if the notification is accepted or shows an error if the notification is not accepted.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript Notification API </title>
</head>
<body style = "background-color:yellow;">
<div class = "containers">
<h1> JavaScript Notification API Example </h1>
<div class = "error_info"></div>
</div>
<script>
(async () => {
//Create and display the required notification
const showInformation = () => {
//Create a new website notification
const notification = new Notification('JavaScript Notification API', {
body: 'This is a JavaScript Notification API demo',
icon: './img/js.png'
});
//Close the notification after 10 seconds
setTimeout(() => {
notification.close();
}, 10 * 1000);
// navigate to a URL when clicked
notification.addEventListener('click', () => {
window.open('https://www.javatpoint.com/', '_blank');
});
}
// show an error_info message
const showMistake = () => {
const error_info = document.querySelector('.error_info');
error_info.style.display = 'block';
error_info.textContent = 'We operated the given websites notifications';
}
//Check the given notification permission
let notification_grant = false;
if (Notification.permission === 'notification_grant') {
notification_grant = true;
} else if (Notification.permission !== 'denied') {
let permission = await Notification.requestPermission();
notification_grant = permission === 'notification_grant' ? true : false;
}
// show the given error notification 
notification_grant ? showInformation() : showMistake();
})();
</script>
</body>
</html>

Output

The following image gets the notification or error information.

Output 1: