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.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThese minimal information and facts will be built coupled vikram university ba 2nd year result with numerous track record information and facts. vikram university ba 3rd year result I favor this significantly.
ReplyDeleteNice Blog information.
ReplyDeleteGIEC Global is the Best Education Consultants in Melbourne, Australia and education consultant in Melbourne, Sydney, Brisbane, Perth, Adelaide,Australia.Education Consultants in Melbourne, Best Education Agent in Melbourne, Sydney, Adelaide, Perth, and Brisbane is GIEC Global. We are Melbourne Migration and Education Consultants, Education Migration Agent Melbourne, Melbourne Study Abroad, and Performance Education Melbourne
I loved to read blogs and your blog is one of the best blog.Satta King
ReplyDelete