Notifications in javascript without user input

Question

I've been trying to figure out a way to use notifications on a background process and couldnt find anything online about it. So, I figured out one way around it and wanted to share (Not sure if this is the best way to go about doing this but here goes:)

Problem: I want to notify the user of new info when the page is running but in the background (blurred). I could use alert('new info!'); to get the taskbar icon to flash, but then you have to manually dismiss it (tried it and it's hella annoying). I really liked the notifications, but they only work if the user performs an action, so not helpful...

Answer 1

My solution: I made a chrome extension that runs in the background and triggers the notifications. It's a little limited in scope as you need to have chrome to do it, but it does what i need it to, and for the purposes of the problem i'm working on, i can just make my user group use chrome ;D

The specifics: The extension only has two components, the manifest and a script. Currently, i setup the manifest so that it only works on my site using the match identifier... and i set the permissions to include notifications.

The JS script has a window.setinterval that looks for an element in the page with the id NOTIFIER. If it's empty, it does nothing, otherwise it creates a notification based on the content and then clears the content to prevent showing the same notification multiple times... (I tried using .onchange for that element, but couldn't get the event to trigger... I'd prefer to do this on an event rather then setInterval)

Notify.js

function onExtLoad() {
  var timer = setInterval(refresh,1000);
}

document.addEventListener('DOMContentLoaded', onExtLoad());

function refresh() {
if (document.getElementById('NOTIFIER').innerHTML == "") {
    //do nothing?
} else {
    var notification = webkitNotifications.createNotification("",
        "You got a new message",
        document.getElementById('NOTIFIER').innerHTML);
    notification.show();
    document.getElementById('NOTIFIER').innerHTML = "";
}

}

Then, all i need to do is have the JS on the page control when it adds info the the NOTIFIER and voila! notifications!

Hope this helps someone else.

@ExpertSystem: I messed around with the MutationObserver but I can only get it to trigger once. Here's a JSFiddle: http://jsfiddle.net/BTX8x/1/ Am I missing something? Is there a way to reset it?

EDIT: Figured it out, i needed subtree:true

Answer 2

I hope I won't be telling something stupid, but from where I see it (and remember from school) that's basically how http works : a request is sent to the server, which issues a response eventually after executing some server-side code. Basically you're asking for a "PUSH" functionality from server to client, and in that case you can't make use of HTTP. Some tricks exist to work around this limitation, but basically they're all issuing requests at a certain frequency (Dave's answer does exactly that). If your site doesn't change that much, that means a lot of requests are issued for no reason (nothing has changed), consuming bandwith for nothing.

From what I know, the answer to this is called Websockets, which are supported by recent browsers only. I never had the chance to use it though so I couldn't tell much more about it. This allows full duplex communication, thus allowing server to "push" data to the client. I guess that's what SO uses for "new message" notifications (top left of the screen - you see immediately when you receive a new message)