Sending browser independant notifications from a web-app

So I came across a data-mining product that presents very useful information via a web-app. What gets delivered to the users of the product is new information  in the form of reports at regular intervals. So the process is,

1. new data is acquired 
2. all the reports are run again on newer data
3. a manager overseeing the product sends an email to the users that notify them that the reports have been updated.

Motivation

So this process is great and it requires very little effort on part of the manager emailing the users. So the question is "why make that manager use even little effort, when the manager's time could be better utilized?". While the manager can add some more personalized info in the email, the entire process can potentially have the following disadvantages

1. human error: the manager may get busy and may forget to notify the users of the updated reports
2. distractions: if the user has to navigate away from the web app and check their email, this could potentially cause distractions. Say the user has a very personal email that is impossible to avoid? this can completely take their attention away from work

Well one way to solve this problem could be through the web-app sending notifications. Having the web-app present notification, makes the app feel... hmm how should I put it? it makes the web-app feel "lived-in" i.e. more personalized. A notification from the web-app gives the user one less exit venue i.e. one less reason to go away from the app. 

Solution

Moving on, W3C recently introduced the Notifications API, which is awesome however it is not really browser independent, as it does not work on IE.  So why add a really cool feature to the web-app that isolates a full set of users?

So all of the above points prompted me to write this little jQuery plugin that can send web-app notifications from the browser.
So I had no experience in writing jQuery plugins, so I found it a bit odd from some tutorials that, all you had to do was initialize an element on your web-page in your script like this,

   $('elem').somePlugin()

I thought, hmm what if you want to modify the properties of the plugin? then what? So in the quest to accomplish that from the jquery plugin, after some looking around I came across this post, that talks about the class and function pattern. With that pattern, an instance is created and returned for the DOM element, so if you want to modify the object later you can do that. So you can do this,

  var plugin = $('elem').somePlugin();
  plugin.modifyPlugin();

Implementation details

So why do I want to make changes to the plugin? Well I will get to it in a bit, but first some back story. I came across this new web speech API that's part of the W3C spec and I thought, "well it would be even better, if the notifications were spoken by the browser". Now I realize that the web speech API is still new and has little support, but I figured I would add that feature anyway, as an "icing on the cake" so if the browser supports it, it will play the sound and if it does not, the plugin would still show the notifications anyway.

To wrap this up, how does this all fit together?  lets have a look at the code below

       var nPlugin,
             url='/sample',
             speakNotifications= true,
             username="Bhuman";

    function test(){
    nPlugin = $("#notificationDiv").appNotify(url, speakNotifications, username);
}
function stopSpeech(){
    nPlugin.stopSpeech();
}

So first we initialise the plugin, by giving it the url and specify if the notifications should be spoken and the name of the user. The reason why we give it the name of the user is, say there are 2 new notifications, so not only with the plugin queue the notifications to be shown, but on receiving them on a browser that does support notifications, it will figure out what time of the day it is say "Good morning/afternoon or evening Bhuman, you have 2 new notifications".  So the notification plugin can be thought of as a class that deals with the notifications and exposes certain public methods that can be used to interact with the plugin. So it exposes the stopSpeech()  method which can be called anytime to stop the notification from being spoken, should it be doing so. So this functionality can be achieved thanks to the class and function pattern, talked about in this post.

When should the notifications be sent?

The next part of the puzzle was how and when will the notifications be sent to the browser? Well ideally the server should only send data when it actually has something to send. One way to achieve that is using websockets, but again it is new and has limited support on older browsers. So the next best to that was long-polling. So what I have did is included a Node.js project in this repository that demonstrates receiving notifications via long-polling.

Licence details

So the plugin is open-source and it is licensed under the BSD 2-Clause license. So I have built a website that gives more info about this plugin and the plugin can be downloaded from here.