Push

Push is the fastest way to get up and running with Javascript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, and IE 9+ to push notifications to a user's desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user's browser does not support the new API.

So just how easy is it to create a notification using Push? We can do it in just one line, actually:

Push.create('Hello World!')

No constructors, just a universal API you can access from anywhere. Push is even compatible with AMD as well:

define(['pushjs'], function (Push) {
   Push.create('Hello World!');
});

When it comes to closing notifications, you have a few options. You can either set a timeout (see "Options"), call Push's close() method, or pass around the notification object and call close() directly. Push's close() method will only work with newer browsers, taking in a notification's unique tag name and closing the first notification it finds with that tag:

Push.create('Hello World!', {
    tag: 'foo'
});

// Somewhere later in your code...

Push.close('foo');

Alternatively, you can assign the Notification wrapper returned by Push to a variable and close it directly:

var notification = Push.create('Hello World!');

// Somewhere later in your code...

notification.close();

When it comes to clearing all open notifications, that's just as easy as well:

Push.clear();

The only required argument in a Push call is a title. However, that doesn't mean you can't add a little something extra. You can pass in options to Push as well, like so:

Push.create('Hello World!', {
    body: 'This is some body content!',
    icon: {
        x16: 'images/icon-x16.png',
        x32: 'images/icon-x32.png'
    },
    timeout: 5000
});

• body: The body text of the notification.
• icon: Can be either the URL to an icon image or an array containing 16x16 and 32x32 pixel icon images (see above).
• onClick: Callback to execute when the notification is clicked.
• onClose: Callback to execute when the notification is closed (obsolete).
• onError: Callback to execute when if the notification throws an error.
• onShow: Callback to execute when the notification is shown (obsolete).
• tag: Unique tag used to identify the notification. Can be used to later close the notification manually.
• timeout: Time in milliseconds until notification closes automatically.