The notification feature in JavaScript utilizes the Notification API to display desktop notifications to users. This functionality allows us to convey messages or information related to JavaScript's capabilities effectively.
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 system utilizes the JavaScript API to display notifications or error messages effectively.
Example 1:
The provided example illustrates the result when the notification is approved. In this scenario, the permission for notifications is configured to true.
Example
<!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://logic-practice.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 image below retrieves the details regarding the notification.
Example 2:
The provided example illustrates the output when the notification setting is configured to false. In this scenario, the permission for notifications is established as false.
Example
<!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://logic-practice.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 subsequent image retrieves the details pertaining to the notification.
Example 3:
The provided example illustrates the result when the notification is accepted, or it displays an error message in the event that the notification is declined.
Example
<!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://logic-practice.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 subsequent image displays the notification or error details.
Output 1:
Output 2:
Conclusion
The JavaScript notification feature assists both developers and users by providing insights regarding the code.