Skip to content

Instantly share code, notes, and snippets.

@u01jmg3

u01jmg3/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Save u01jmg3/1f2ebcb89538e901f0ab to your computer and use it in GitHub Desktop.
Save u01jmg3/1f2ebcb89538e901f0ab to your computer and use it in GitHub Desktop.
Download ZIP
Notifications Example using Web Notifications API (run from WAMP)
Raw
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="Jonathan Goode">
<meta name="copyright" content="&copy; Jonathan Goode, 2015">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Notifications</title>
<style>
.button {
width: 100px;
height: 44px;
}
</style>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- https://github.com/alexgibson/notify.js -->
<script type="text/javascript" charset="utf-8" src="notify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '.button', function(){
function onShowNotification(){
console.log('Notification is shown');
}
function onCloseNotification(){
console.log('Notification is closed');
}
function onClickNotification(){
//go directly to booking request
window.open('http://www.abdn.ac.uk?request-id=' + this.options.tag, '_blank');
console.log('Notification was clicked');
}
function onErrorNotification(){
console.error('Error showing notification. You may need to request permission.');
}
function onPermissionGranted(){
console.log('Permission has been granted by the user');
doNotification();
}
function onPermissionDenied(){
console.warn('Permission has been denied by the user');
}
function doNotification(){
var myNotification = new Notify('This is the title of the notification', {
body: 'This is the body of the notification',
//icon: 'favicon.ico',
//if request has been actioned close notification automatically
tag: Math.random(), //unique ID
timeout: 600, //long duration giving user time to action
notifyShow: onShowNotification,
notifyClose: onCloseNotification,
notifyClick: onClickNotification,
notifyError: onErrorNotification
});
myNotification.show();
}
if (Notify.needsPermission())
Notify.requestPermission(onPermissionGranted, onPermissionDenied);
else
doNotification();
});
});
</script>
</head>
<body>
<div>
<button class="button">Show a Notification</button>
</div>
</body>
</html>
Raw
notify.js
(function(c,d){"function"===typeof define&&define.amd?define("notify",[],function(){return d(c,document)}):"object"===typeof exports?module.exports=d(c,document):c.Notify=d(c,document)})(window,function(c,d){function b(a,c){if("string"!==typeof a)throw Error("Notify(): first arg (title) must be a string.");this.title=a;this.options={icon:"",body:"",tag:"",notifyShow:null,notifyClose:null,notifyClick:null,notifyError:null,permissionGranted:null,permissionDenied:null,timeout:null};this.permission=null;
if(b.isSupported()&&"object"===typeof c){for(var e in c)c.hasOwnProperty(e)&&(this.options[e]=c[e]);"function"===typeof this.options.notifyShow&&(this.onShowCallback=this.options.notifyShow);"function"===typeof this.options.notifyClose&&(this.onCloseCallback=this.options.notifyClose);"function"===typeof this.options.notifyClick&&(this.onClickCallback=this.options.notifyClick);"function"===typeof this.options.notifyError&&(this.onErrorCallback=this.options.notifyError)}}b.isSupported=function(){return"Notification"in
c?!0:!1};b.needsPermission=function(){return b.isSupported()&&"granted"===Notification.permission?!1:!0};b.requestPermission=function(a,d){b.isSupported()&&c.Notification.requestPermission(function(b){switch(b){case "granted":"function"===typeof a&&a();break;case "denied":"function"===typeof d&&d()}})};b.prototype.show=function(){b.isSupported()&&(this.myNotify=new Notification(this.title,{body:this.options.body,tag:this.options.tag,icon:this.options.icon}),this.options.timeout&&!isNaN(this.options.timeout)&&
setTimeout(this.close.bind(this),1E3*this.options.timeout),this.myNotify.addEventListener("show",this,!1),this.myNotify.addEventListener("error",this,!1),this.myNotify.addEventListener("close",this,!1),this.myNotify.addEventListener("click",this,!1))};b.prototype.onShowNotification=function(a){if(this.onShowCallback)this.onShowCallback(a)};b.prototype.onCloseNotification=function(a){if(this.onCloseCallback)this.onCloseCallback(a);this.destroy()};b.prototype.onClickNotification=function(a){if(this.onClickCallback)this.onClickCallback(a)};
b.prototype.onErrorNotification=function(a){if(this.onErrorCallback)this.onErrorCallback(a);this.destroy()};b.prototype.destroy=function(){this.myNotify.removeEventListener("show",this,!1);this.myNotify.removeEventListener("error",this,!1);this.myNotify.removeEventListener("close",this,!1);this.myNotify.removeEventListener("click",this,!1)};b.prototype.close=function(){this.myNotify.close()};b.prototype.handleEvent=function(a){switch(a.type){case "show":this.onShowNotification(a);break;case "close":this.onCloseNotification(a);
break;case "click":this.onClickNotification(a);break;case "error":this.onErrorNotification(a)}};return b});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment