JavaScript Notification

Last Updated : 17 Mar 2025

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.TpointTech.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.TpointTech.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.TpointTech.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:

Output 2:

Conclusion

The javascript notification helps developers and users with the code information.

Next TopicJasmine-javascript

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

Interview Questions

Python Java Data Structure C++ C HTML JavaScript jQuery SQL Power BI

Online Compilers

C Compiler R Compiler C++ Compiler PHP Compiler Java Compiler HTML Editor Swift Compiler Python Compiler JavaScript Editor TypeScript Editor

Latest Post | Tutorials List | Privacy Policy | About Us | Contact Us

JavaScript Notification

Permissions for Notifications

Examples

Conclusion

Contact info

Follow us

Top Tutorials

Interview Questions

Online Compilers

JavaScript Basics

JS Variables and Data Types

JS Control Statements

JavaScript Functions

JavaScript Objects

JS Advanced Functions

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON Object

JavaScript Validation

JavaScript Cookies

Exception Handling

JavaScript Collections

JavaScript Events

JavaScript OOPs

JavaScript BOM

Interview Questions

MCQ

Differences

JavaScript Map Methods

JavaScript Handler

JavaScript Number Methods

JavaScript Reflect

JavaScript Symbol

Symbol Property

JavaScript Math Methods

JavaScript Date Methods

JavaScript DataView

JavaScript Object Methods

JavaScript Set Methods

JavaScript String Methods

JavaScript TypedArray Method

JavaScript WeakMap Methods

JavaScript WeakSet Methods

JavaScript Array Methods

JavaScript RegExp Object

JavaScript Extras

JavaScript Misc

JavaScript Advance

Questions

Lodash

JavaScript Notification

Permissions for Notifications

Examples

Conclusion

Related Posts

Subscribe to Tpoint Tech

Contact info

Follow us

Top Tutorials

Interview Questions

Online Compilers