JavaScript Desktop Notification Example
JavaScript desktop notification helps you to engage your current visitor or audience on your website or app. It is also helpful to notify the important message, news, and events instantly to the user.
Before getting started we know that JavaScript is rich in features so it’s not going to be a tough task. But the browser must support this functionality. In short all major browsers like Chrome, Mozilla Firefox and Safari support the Notification functionality.
Let’s start to code step by step and learn in each and every step and see what and how it happens.
Step 1: The very first step is checking the browser compatibility whether the browser supports or not.
if (!("Notification" in window)) {
alert("Desktop notifications is not supported by this browser. Try another.");
return;
}If the browser does not support display some message to the user and return form there. You can also check it like if (!Notification) but this will not work in Internet Explorer, even not display the not supported message.
Step 2: The second step is to check whether notification permissions have already been granted for the website or app. If permission is granted, create a notification.
else if (Notification.permission === "granted") {
var myNotification = new Notification("Welcome back on WebSparrow.org");
}Step 3: In the third step, If permission is not already granted, we need to ask user permission for notification using Notification.requestPermission() method.
Step 4: The final step is if a user granted the notification permission, let’s create a notification.
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (userPermission) {
if (userPermission === "granted") {
var myNotification = new Notification("Welcome on WebSparrow.org");
}
});
}Note:
1- Safari started to support notification with Safari 6, but only on Mac OSX 10.8+.
2- Since Version 38.14352 of MS Edge Notification API is suported. IE 11 and < is not supported.
Notification Constructor
The Notification() constructor creates a new Notification object instance, which represents a user notification.
var notification = new Notification(title,options);Parameters:
title: Title of the notification is mandatory. It will be shown at top of the notification.
options | It is optional.
icon: A USVString containing the URL of an icon to be displayed in the notification.
body: A DOMString representing the body text of the notification, which will be displayed below the title.
image: A USVString containing the URL of an image to be displayed in the notification.
badge: A USVString containing the URL of the image used to represent the notification when there is not enough space to display the notification itself.
Check the example for how to create notification constructor.
var myNotification = new Notification("Spring Tutorials", {
icon: "https://websparrow.org/images/spring-logo.png",
body: "Welcome to Spring Framework tutorials on websparrow.org."
});Notification Events
There are many events that you can apply on your notification. These events are given below.
- click
- show
- close
- error
Now let’s check the complete example of JavaScript desktop notification.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Desktop Notification Example</title>
<script type="text/javascript">
function showNotifaication() {
if (!("Notification" in window)) {
alert("Desktop notifications is not supported by this browser. Try another.");
return;
} else if (Notification.permission === "granted") {
var myNotification = new Notification("How to parse nested JSON object in Java", {
icon: "https://websparrow.org/images/java-logo.png",
body: "In this Java tutorial we are going to parse/read the nested JSON object using JSON.simple library."
});
myNotification.onclick = function () {
window.open("https://websparrow.org/java/how-to-parse-nested-json-object-in-java");
};
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (userPermission) {
if (userPermission === "granted") {
var myNotification = new Notification("Spring Tutorials", {
icon: "https://websparrow.org/images/spring-logo.png",
body: "Welcome to Spring Framework tutorials on websparrow.org. Before starting all the other things, first we need to configure/install framework."
});
myNotification.onclick = function () {
window.open("https://websparrow.org/spring/");
};
// setTimeout(myNotification.close.bind(myNotification), 5000);
}
});
}
}
</script>
</head>
<body>
<button onclick="showNotifaication();">Show Notification</button>
</body>
</html>You can also close your notification in some interval of time. Where time is in the millisecond.
setTimeout(myNotification.close.bind(myNotification), 5000);It will close the notification after the 5 second.
Similar Posts
About the Author
