JavaScript
Article

HTML5 Desktop Notifications Example

By Sam Deering

G’day mate. So today I did a quick demo to show you an example of desktop notifications using HTML5 and a little JavaScript.

View Project on GitHub

html5-desktop-notification

Background info on HTML5 Desktop Alerts

A notification allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email.

You can display, queue and replace notifications. You can also add an icon to the alert which appears left of the message body. Also also you can use the tag member for multiple instances (The result of this situation is a single notification; the second one replaces the first having the same tag). Read more about the W3C Web Notifications API.

From my testing only 4 alerts show at any one time, they get queued so when you close one the next one will show and so on. Also you cannot put hyperlinks in them (which would be nice to have). This is what the desktop alert looks like.

desktop-alert

And like most features like this for security reasons you’re prompted for access.

allow-deny

4alerts

The Script

The script is pretty simple it just uses the webkitNotifications to generate a desktop alert with a title and message.

/*
   @Copyright: jQuery4u 2012
   @Author: Sam Deering
   @Script: html5desktopalert.js
*/
(function($,W,D,undefined)
{
    W.JQUERY4U = W.JQUERY4U || {};

    W.JQUERY4U.HTML5DESKTOPALERT = {

        name: "jQuery HTML5 DESKTOP ALERT",

        namespace: "W.JQUERY4U.HTML5DESKTOPALERT",

        settings:
        {
           //turn into plugin? ...
        },

        cache:
        {
            //runtime data, dom elements etc...
        },

        init: function(settings)
        {
            this.settings = $.extend({}, this.settings, settings);
            this.cache.notifications = window.webkitNotifications;
            this.testBrowserSupport();
            this.setupEventHandlers();
        },

        setupEventHandlers: function()
        {
           var _this = this;
           $('#alert-me-btn').bind('click', function(e)
           {
               _this.checkPermission("desktopAlert");
           });
        },

        //tests HTML5 browser support and permission request
        testBrowserSupport: function()
        {
            var $browserMsg = $('#browser-support-msg');
            if(this.cache.notifications)
            {
                $browserMsg.html("Yay! Notifications are supported on this browser.").parent().addClass('alert-success');
            }
            else
            {
                $browserMsg.html("Sorry. Notifications aren't supported on this browser.").parent().addClass('alert-error');
            }
        },

        checkPermission: function(callback)
        {
            var _this = this;
            if (this.cache.notifications.checkPermission() == 0)
            {
                _this[callback]();
            }
            else
            {
                this.cache.notifications.requestPermission(function()
                {
                    if (this.cache.notifications.checkPermission() == 0) _this[callback]();
                });
            }
        },

        desktopAlert: function()
        {
            console.log('sending alert...');
            var notification = window.webkitNotifications.createNotification("", $('#da-title').val(), $('#da-message').val());
            notification.show();
        }
    }

    $(D).ready( function()
    {
        //start up the form events
        W.JQUERY4U.HTML5DESKTOPALERT.init();
    });


})(jQuery,window,document);

View Demo

  • Rachit

    good One

    • http://jquery4u.com/ jQuery4u

      thanks guys

  • Ergec Senturk

    yay that’s a good one :) very usable

  • RITURAJ RATAN

    osam…

  • UtauKudasai

    Can you update the example to be compatible with Firefox 22’s implementation of Notification API?

  • Ronald van Zon

    I created a simple jquery extension that can be used for html5 notifications.
    https://github.com/Eagllus/html5_notification

  • DigitalMan

    “Sorry. Notifications aren’t supported on this browser.” Given that I Googled for this because another site I’m on is using them at this very moment, I’m gonna go ahead and say Chrome probably supports it ;)

  • Zeeshan Ali Khan

    The author doesn’t seem to be active on this post anymore… I tested the demo page in latest versions of Chrome, Firefox and IE. All have the same error: “Sorry. Notifications aren’t supported on this browser.”

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.