In most of the sites have today their own desktop notification system to connect user in a large scale. So how to create a desktop notification for your site. Its very simple to generate a new notification using JavaScript, you have to write hardly 2-3 lines of code. Lets create one to generate desktop notification.
To create a new notification for user you have to follow three steps.
And when the user has opened the site prompt user with an box, saying user to allow the site to show notification. For this use follow code block.
Now create a button in the body & by clicking on that button a notification will be shown.
Now in the script section add the Notify() method and write the following piece of code.
Here are the full code.
Host the file in any server like IIS or Apache to run it. Direct running the file in browser won't work out. Click on the Notify button to get the notification. Change the text and image according to your requirement.
To create a new notification for user you have to follow three steps.
- Is the browser supports the notification feature. If not show an appropriate message.
- Ask user to allow the notification feature to show.
- Create a new notification and a click event to fire.
if (!Notification) {
alert('Desktop notifications not available in
your browser. Try Chromium.');
return;
}
And when the user has opened the site prompt user with an box, saying user to allow the site to show notification. For this use follow code block.
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
Now create a button in the body & by clicking on that button a notification will be shown.
<button onclick="notifyMe()">
Notify me!
</button>
Now in the script section add the Notify() method and write the following piece of code.
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available
in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
body: "Here is your notification!",
});
notification.onclick = function () {
window.open("http://asp-arka.blogspot.in/");
};
}
}
Here are the full code.
<html>
<button onclick="notifyMe()">
Notify me!
</button>
<script>
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (!Notification) {
alert('Desktop
notifications not available in your browser.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
body: "Here is your notification!",
});
notification.onclick = function () {
window.open("http://asp-arka.blogspot.in/");
};
}
}
</script>
</html>
Host the file in any server like IIS or Apache to run it. Direct running the file in browser won't work out. Click on the Notify button to get the notification. Change the text and image according to your requirement.
