Desktop Notifications

Web Stuff 28.08.2015 3275

Desktop Notifications is on his way and will be available soon on all browsers. At the moment you can have desktop notifications on Chrome, Safari, Firefox and IE9

I have been playing around with it for a while and give you code snippet that fully works in Chrome, Safari, Firefox and IE9. It will also check if your browser supports it and if you already enabled it on your browser.

Demo

Accept Notifications Just a Test 1 New Message

In Details...

Let's have a look into Javascript.

<script type="text/javascript">
function dNotifyPermission() {
 
 if ('Notification' in window) {
 
 if (Notification.permission === "granted") {
 // If it's okay let's create a notification
 dNotifyNew("Desktop Notifications already accepted.");
 }
 
 // Otherwise, we need to ask the user for permission
 // Note, Chrome does not implement the permission static property
 // So we have to check for NOT 'denied' instead of 'default'
 else if (Notification.permission !== 'denied') {
 Notification.requestPermission(function (permission) {
 
 // Whatever the user answers, we make sure we store the information
 if(!('permission' in Notification)) {
 Notification.permission = permission;
 }
 
 // If the user is okay, let's create a notification
 if (permission === "granted") {
 dNotifyNew("Desktop Notifications accepted.");
 }
 });
 }
 } else {
 alert("This Browser/OS does not support Notifications yet.");
 }
 
}

function dNotifyNew(msg) { 
 var notification = new Notification(msg, { icon: "img/logo_small.png", dir: "auto", tag: 'jakweb'});
 show_notifiy = false; 
}
</script>

and the buttons to call for permission and fire up some notifications.

<a class="btn btn-mini btn-success" href="javascript:void(0)" onclick="dNotifyPermission()">Accept Notifications</a>
<a class="btn btn-mini btn-warning" href="javascript:void(0)" onclick="dNotifyNew('Just a Test')">Just a Test</a>
<a class="btn btn-mini btn-primary" href="javascript:void(0)" onclick="dNotifyNew('1 New Message')">1 New Message</a>

The first button is asking for permission and the other two fire up some notifications. It is all quite straight forward and more explanation is almost not necessary.

Desktop Notifications