We’re all used to browser notifications; we get them all the time on sites like Facebook and now, using the Notification API, we can actually push notifications to the desktop.
Imagine a site performing a task whilst the user checks her email, she would still receive our completion notification on her desktop.
Browser support
At present, the Notification API is a working draft, so it’s not universally supported. However, it is supported by Chrome, Mozilla and Safari.
Even more helpfully, Chrome, Mozilla and Safari all use the same syntax.
IE has no support at present, but we expect IE support to arrive soon.
A look at the API
To create a new notification for the user we need to create a new instance of the Notification object and this object takes two parameters:
var notification = new Notification(title, options)As you see the first one is the title, this parameter is pretty self-explanatory this will be the bolded text in your notification, the first one the user sees.
Secondly we have the options, this parameter will be an object that can have several properties:
- dir: The direction of the notification; it can have the values auto, ltr, or rtl.
- lang: In here you can specify the language that will be used in your notification.
- body: In the body you can place any extra content you wish to display.
- tag: With tag you can add an ID to a notification.
- icon: With this property you can assign an icon to your notification.
When it comes to this API we also have some event handlers:
- Notification.onclick: This event will be triggered every time the user clicks the notification.
- Notification.onshow: When the notification is shown to the user this event is triggered.
- Notification.onerror: This event is triggered anytime the notification encounters an error.
- Notification.onclose: When the user closes the notification she triggers this event.
With these event handlers and some functions you can get really creative with your notifications.
Creating a notification
In this example I will show a notification to the user when she clicks a button on the page, but you can bind it to anything, from a new personal message to the warning she has a new follower on Twitter.
The button will be:
<button class="notification”>Give me one notification!</button>This is all the HTML we need. We’ll now move on to the JavaScript we need to show this notification.
The first thing we need to do is add a click event to our button and then check for browser support on notifications:
$('.notification').click(function() {
if (!("Notification" in window)) {
console.log(“We had some notifications for you but your browser can’t show them.");
}
});So we attached the click event listener to our button and then we checked for browser support, if the browser doesn’t have it we simply give them a sad console message, if it does support it we can go on with our code.
The next step in our code is to check is if the user has given us permission to show notifications, if he has we can show the notification right here:
else if (Notification.permission === "granted") {
var notification = new Notification();
}For now we will leave the notification object empty and we’ll populate it later.
We checked if the user has given us permission and acted on that but we never requested permission, we simply checked if it was true, so that if we already had permission the browser wouldn’t have to read the rest of the code.
Now we will do exactly that, we will ask the user for permission to show our notifications and store that value:
Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
});As you can see we requested permission from the user and saved the user’s answer so that now we can check if she granted us permission and we can show our notifications.
if (permission === "granted") {
var notification = new Notification();
}Right now our notification object is empty and we need to populate it so that we can see it.
In this example I’m going to put a title, some body text and an icon so our object will look something like:
var notification = new Notification('A notification’, {body: 'And a great one!’, icon: 'http://placekitten.com/100/100'});Don’t forget to change the notification object at the top as well. If you would like to see a demo you can see it here.
And with this final adjustment to our code we have created a fully functional notification system for our user. Of course we can expand on this and I think we all should, but in a couple lines of code we have added desktop notifications to our application which is something a lot of web applications have wanted and needed for years, a way to interact with the user even when she is off doing something else.
