Coding chrome desktop notification in jQuery

Google Desktop Notification is nothing new for gmail users, whenever new mail comes it notify you from rectangle balloon tip at bottom right of your monitor.


To show desktop notifications, first of all you need to ask user for permission to use chrome notification feature on your website.

It can  be done with following code.


To check permissions

// 0 = allowed
// 1 = waiting for user action
// 2 = denied


And once user permits your code to show notifications.

You could show it using following code.

notification = window.webkitNotifications.createNotification(icon, title, description);;

You can attach onclick event to this notification. Let’s say you want to open some product offer or upsell page after user clicks notification it could be achieved by

notification.onclick = function () {;

So coding it using jQuery and JavaScript,  I’d like to initialize chrome desktop notification in bit graceful way.

$(document).ready(function () {

    $("#testbtn").click(function () {
            icon: '',
            title: 'Hi There!',
            description: 'Visit my blog on JavaScript Programming'


Where button will look something like this

  <a class="btn btn-lg btn-success" href="#" role="button" id="testbtn">Test</a>

Plugin Code:-

  • Read user options for icon, title and description in constructor and override them to default options.
  • check if user allowed website to show desktop notification, if not ask permission.
  • if user allowed site to show, call window.webkitNotifications.createNotification and pass user options to show notification.
  • read onClickOpen function arguments and assign it to; via clickEvent private method.
  • finally call showEvent method to popup notification.
var SimpleNotification = window.SimpleNotification || {};
SimpleNotification = (function () {
    var notification;
    var permitted = window.webkitNotifications.checkPermission() == 0 ? true : false;

    var defaults = {
        icon: '',
        title: 'Test Notification',
        description: 'Notification texts'

    var showNotification = function (options) {
        if (!permitted) {
        var settings = jQuery.extend({}, defaults, options);
        notification = window.webkitNotifications.createNotification(
        return this;

    var clickEvent = function (url) {
        notification.onclick = function () {
        return this;

    var showEvent = function () {;

    return {
        notify: showNotification,
        onClickOpen: clickEvent,
        show: showEvent


This code can even work without jQuery, you need to eleminate minor codes (like var settings = jQuery.extend({},defaults,options)) to get it done.

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

jQuery Plugin – make jwplayer resumable for next visit and improve conversion

Next Post

PHP – Import DigitalAccessPass existing users into vbulletin 5 connect for auto-login

Related Posts