Html5 Notification
HTML
<button id="requestPermission">Request Permission</button>
<button id="checkPermission">Check Permission</button>
<br/>
<br/>
<input name="title" style="width:90%" value="Session Expiration Notice" placeholder="title"/>
<br/>
<input name="body" style="width:90%" value="Please Click on it to renew your Session" placeholder="body" />
<br/>
<button id="show">show</button>
JavaScript
$(function() {
if (window.Notification) {
$("#requestPermission").on("click", function() {
return Notification.requestPermission();
});
$("#checkPermission").on("click", function() {
if (Notification.permission) {
return $("#result").text(Notification.permission);
} else {
return $("#result").text((new Notification("check")).permission);
}
});
return $("#show").on("click", function() {
var notification;
var audio = new Audio('http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3');
audio.play();
notification = new Notification($("[name=title]").val(), {
tag: "Warning!",
body: $("[name=body]").val(),
/*Firefox*/
iconUrl: "http://hygieia.com/wp-content/themes/hygieia/img/favicons/favicon-32x32.png",
/*Chrome*/
icon: "http://hygieia.com/wp-content/themes/hygieia/img/favicons/favicon-32x32.png",
sound:"http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3"
});
return notification.onclick = function() {
notification.close();
window.open().close();
alert('Your session is renewed...Please resume your work.');
return window.focus();
};
});
}
else {
//For Demo purpose only.
alert('HTML 5 notification is not supported');
}
});