jquery-notify.js

This is a jQuery plugin that adopts a smattering of the (w3c, draft) Notifications API as well as RSS reader and proxy curtesy of googles jqfeed to instantly create a notification mechanism of new posts

I've created a similar project Notification.js to shim Web Notifications up for use with a besoke notification system.

Features

This plugin is all about discovering new posts written by capturing your attention and bringing you back to the page. It employs various "eye catching" techniques, leveraging the best the browser can offer. Checkout the techniques below.

techniques vs. browsers

quicky

1. download

jquery-notify.js

2. install

<script src="jquery-notify.js"></script>

3. send a message

$.notify( url Image, string Title, string Description);

$.notify("star.ico","Hello","This is a test");

Or add a bit more logic and leverage browser capabilities

// Some logic to request the browser supports it.
$.notifyRequest(function(){

	// Callback: Trigger notification
	$.notify("star.ico","Hello","This is a test");

});

notify when new items arrive in an RSS feed

We can listen to an RSS feed too, but we pass in an object like this instead of a string.

$.notify({
	path : "http://feeds.bbci.co.uk/news/rss.xml", //required
	interval : 60,      //optional (number of seconds between requests, default is 60)
	callback : function(json){}, //optional (when new results are found they are sent to this function)
	initial : false     //optional (this just shows notifications on the first pass, by default this is true, and we wont see the diference)
});

enable desktop notifications

check permission

To use the desktop notifications we need to request permission. So first lets check whether your browser supports it?

var chck = $.notifyCheck();
if( chck === 0 ){
	alert("Yes enabled") 
}
else if( chck === 1 ){
	alert("Browser supports it, but not enabled") 
}
else if( chck === -1 ){
	alert("Browser does not support it") 
}

If  $.notifyCheck() === 1, then perhaps prompt the user to enable it?

if($.notifyCheck() === 1){
	// show a button to enable permissions
}

request permission

// attach this to a button click event or automatically load it.
$.notifyRequest();

that's all folks

Now go to first demo above and run it!