Question

I want to push out RSS feed updates to HTML5 desktop notifications which the user would receive if they had my site open in Chrome.

I gather I need to do the following (somebody much smarter than me explained this in overview) – create a server-side component which will poll the feed for updates; and then perhaps store them in a database (?). Then a client-side component would check for updates and display them using the HTML5 notifications API.

Is anyone confirm that, and if possible help me out with more detail so that I can track down the various bits I need to make this work? Much appreciated.

Answer 1

I’m going to assume that you’re using jQuery, and you don’t mind using plugins. In this case, we’re going to use the jFeed plugin for parsing RSS code.

// Desktop notifications are only available on WebKit browsers, for now, so only carry out
// notifications if the API is available.
if (window.webkitNotifications) {

    // Just a piece of data to determine whether 1) the page just loaded, and 2) there are any
    // new elements in the feed.
    var lastTime = null;

    // This is to check if you have permissions to display notifications. Usually, the
    // checkPermissions method only returns a number. 0 being that you don't have permission
    // to display notifications, yet.
    if (window.webkitNotifications.checkPermissions() <= 0) {
        // If you don't have permission, then get the permission from the user.
        window.webkitNotifications.requestPermission(callback);
    }

    // The code below will run every thirty seconds.
    setInterval(function () {
        // What we want to do here is carry out an AJAX request to check for changes in the RSS
        // feed only if we have permission to display notifications. Otherwise, what's the point
        // of checking for changes if the user doesn't want to know?
        if (window.webkitNotifications.checkPermissions() > 0) {
            $.jFeed({
                url: 'urltofeeds',
                success: function (feed) {
                    // Looks at the latest item's time, and checks to see if it's any different
                    // than what we have in memory.
                    if (lastTime !== feed.items[0].updated) {

                        // If so, determine whether we recorded the time, or not.
                        if (lastTime !== null) {
                            // If we did record the time, that means there are new content from
                            // the last time we checked.
                            window.webkitNotifications()
                        }

                        // Update the last time.
                        lastTime = feed.items[0].updated;
                    }
                }
            });
        }
    }, 30000);
}

I gather I need to do the following (somebody much smarter than me explained this in overview) – create a server-side component which will poll the feed for updates; and then perhaps store them in a database (?).

Sounds like your friend described long-polling. That’s a perfectionist’s approach for something as simple as a blog.

Simple polling will be the same thing. The difference is, a notification will only show up at every polling interval, instead of instantaneously.