:::: MENU ::::

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


And once user permits your code to show notifications.

You could show it using following code.

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

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

Where button will look something like this

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 window.open(url); via clickEvent private method.
  • finally call showEvent method to popup notification.

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

So, what do you think ?