Web Notifications Safari 6.0 and OSX 10.8

Web notifications have been around for a while, but with Apple’s latest release of OSX 10.8 and notification center they are most likely to become a bit more popular. I had a look into the developer documentation for safari and found a nice chunk of code for displaying notifications in Safari 6.0.

Safari 6.0 Notifications

Note: This demo has only been tested with OSX 10.8 and Safari 6.0. I’m not sure of how other browsers will handle this.

Demo

The link below will first ask permission, then display a notification:

Click for a Notification

*NOTE: If this doesn’t work for you sometimes you may have to restart your browser after granting permission for notifications to be displayed from this site. This seems to possibly be a bug in Chrome and Safari.

Code

We basically create a function ‘notify’ that we can call later to output our notification. The nice thing is that it will do all the permission checking for us:

var notify = function(title, options) {
    // check for notification compatibility
    if(!window.Notification) {
        // if browser version is unsupported, be silent
        return;
    }
    // log current permission level
    console.log(Notification.permissionLevel());
    // if the user has not been asked to grant or deny notifications from this domain
    if(Notification.permissionLevel() === 'default') {
        Notification.requestPermission(function() {
            // callback this function once a permission level has been set
            notify(title, options);
        });
    }
    // if the user has granted permission for this domain to send notifications
    else if(Notification.permissionLevel() === 'granted') {
        var n = new Notification(
                    title,
                    options
                );
    }
    // if the user does not want notifications to come from this domain
    else if(Notification.permissionLevel() === 'denied') {
        // be silent
        return;
    }
};

This is where we actually call the notify function. This is the code from the above demo link:

Click for a Notification

You may be wondering what the ‘options’ object takes. Here is is straight from the Apple Safari Docs:

The only required parameter is the title. Available keys that can be included in the options object are as follows:

body: The notification’s subtitle.

tag: The notification’s unique identifier. This prevents duplicate entries from appearing in Notification Center if the user has multiple instances of your website open at once.

onshow: An event that fires when the notification is first presented onscreen.

onclick: An event that fires if the user clicks on the notification as an alert, a banner, or in Notification Center. By default, clicking a notification brings the receiving window into focus, even if another application is in the foreground.

onclose: An event that fires when the notification is dismissed, or closed in Notification Center.

onerror: An event that fires when the notification cannot be presented to the user. This event is fired if the permission level is set to denied or default.
The notification is placed in a queue and will be shown when no notifications precede it. The subtitle is always the domain or extension name from which the notification originated, and the icon is always the Safari icon.

You can see in our example we’re already making use of the ‘body’ option. Here’s an example of calling a few of those options again from the developer docs:

notify( '1 new friend request',
         { 'body': 'Jill would like to add you as a friend',
            // prevent duplicate notifications
            'tag' : 'unique string',
            // callback function when the notification is closed
            'onclose': function() {
                 console.log('notification closed');
          }
       )

For more info head over to Safari’s developer docs.

  • http://www.jonathanfielding.com Jonathan

    Unfortunately your code does not run properly in Chrome, I’m currently working on a cross browser version https://github.com/jonathan-fielding/jquery-notifications

  • http://www.jonathanfielding.com Jonathan

    Plus I can’t get the on click to work in safari :S

  • http://www.jonathanfielding.com Jonathan

    nevermind, got it to work, apparently had to remove notifications permission, close safari and then reopen safari and then started to work again which suggests to me that its a tiny bit buggy at the moment (safari’s notification support)

  • http://www.jonathanfielding.com Jonathan

    ok ignore last post, its working now, safari 6 appears to be buggy as i find whenever i get problems, close browser, reopen and stuff works properly again, this is same on both mountain lion and lion

  • http://makesomecode.com Nick Verwymeren

    Strange, I just tried in my browser again and seems to be working fine. What version of Safari and OS X are you using?

  • greatwitenorth

    That seems like a really nice idea. I’ll be sure to follow your progress.

  • Pingback: how I should implement web notification? - feed99

  • Pingback: Internet Mentions: @ Replies for Web Pages | The Overthinker