How to Add OS X Notification Center for Your Website

The Notification Center has been around since iOS5, and it is also now available for OS X Mountain Lion. This feature enables native applications to show Notifications to users for events such as incoming mail, Twitter mention, Facebook Inbox message and successful uploads.

This notification in OS X Mountain Lion appears at top right side of the screen, as shown below (and then disappears after a certain amount of time, stored in the Notification Center).

This feature, however, is not limited for OS X native applications. We actually can add it for websites as well. Let’s see how we can do it.

Recommended Reading: How to Create Hide / Show Notification Bar With CSS3

The Notification Permission

First let’s walk through the permission matter. Before we are able to show the notification, the users should explicitly allow it. There are three permission levels for the Notification: default, granted and denied. To check the permission level, we can write the following code:.

 console.log(Notification.permissionLevel());

In the preceding code, we log the current permission level within the console, which in my case returns granted.

Users can deny the notification through the Preference option later on, at any time.

Running the Notification

The notification is specified with the Notification function, and Apple has provided a complete code example on how to deploy it for websites. But, I slightly modified the codes for demonstration purpose, as follows.

 $(function() { var notify = function(title, options) { if(window.Notification) { $('.no-support').hide(); console.log(Notification.permissionLevel()); if(Notification.permissionLevel() === 'default') { Notification.requestPermission(function() { notify(title, options); }); } else if(Notification.permissionLevel() === 'granted') { $('.no-permission').hide(); var welcome = new Notification(title, options); } else if(Notification.permissionLevel() === 'denied') { $('.support, .no-support, .notify-click').hide(); } } else if(!window.Notification) { $('.support, .no-permission, .notify-click').hide(); } };

In the preceding codes, we created a variable name notify to store the Notification function, and we set this function with two arguments: title and options.

Then, simply replace the arguments with ones that we want to show in the notification. In this example, I would like to set the title to “Hello World” and set the notification content to “Welcome to our website” within the option, like so.

 notify('Hello World', { body: 'Welcome to our website' });

If the users haven’t set the permission, Safari will first prompt an option to Allow or Don’t Allow the notification to show.

Once it is granted, the notification should appear as shown in the following screenshot.

Event

Furthermore, we can show the notification upon an event. For example, by using the jQuery .on method, we set the notification to show upon a user click.

 $('.button').on('click', function() { notify('Clicked', { body: 'You just clicked the button' }); });

Alternative function

It is worth noting that this will only work in Safari 6.0, which unfortunately is only available in OS X Mountain Lion. Alternatively, we can use the webkitNotification function as opposed to Notification, which seems to work both in Safari and Chrome, and Thijs van der Vossen over at FingerTips has shown us how to use it.

Further Reference

These codes we have demonstrated here are merely examples, there is certainly room for improvements here and there. Below are some good references to dig into this function further.