HTML5 Zone is brought to you in partnership with:

Gil Fink, Microsoft MVP, is an expert in Web development and Microsoft data platform. He works as a senior architect at Sela Group. He is currently consulting for various enterprises and companies, where he architects and develops Web and RIA-based solutions. He conducts lectures and workshops for developers and enterprises who want to specialize in infrastructure and Web development. He is also a co-author of several Microsoft Official Courses and training kits. You can read his publications at his blog: http://blogs.microsoft.co.il/blogs/gilf. Gil is a DZone MVB and is not an employee of DZone and has posted 151 posts at DZone. You can read more from them at their website. View Full User Profile

Keep Users Coming Back With Desktop Notifications for Web Apps

12.07.2011
| 17366 views |
  • submit to reddit
Notifications. They’re those little numbers that pop up on your application icons that you can’t help but notice.  Facebook, Google+, Twitter clients and email clients use them to let you know when you have new messages or updates.  Blogs can use them to notify users when there are new posts or new comments on the post they were interested in.  There are even web apps like Milage Stats that can notify you when your car needs tune-ups.

Notification mechanisms can help to create higher user engagement by providing appropriate and timely feedback to the user when it is needed. This article shows you how to enable web notifications on your own web sites using several methods including the robust IE9 Pinned Sites features and via the early HTML5 Web Notification API.  We’ll show you why it’s very beneficial to your overall site engagement to implement one or more of these methods for notifications.

 

Why Should We Bother with Notifications at All?

Before we go into any technical information let’s start with some examples of sites that are a lot more engaging because of their clever use of notifications.



Milage Stats is an automobile comparison and notification web application that was built by the Microsoft Patterns & Practices team. One of the interesting things about this app is its ability to notify the user when their car needs a tune-up. This is a really interesting example of a notification that lets the user know when they need to take care of a real world task, which can be very valuable to the user. There is nothing more useful than to be notified when you need to do something that you might forget.

 

 

 

Another example that you probably have already used heavily in your daily routine is email notifications. Whether it is at work or home, mail notifications tells the user when a new mail arrives and help them to be more responsive.

The last example I’ll give is notifications for daily deals sites.  Notifications are crucial to sites like NewEgg and SlickDeals because you are trying to engage users to a point where they don’t want to miss a single daily discount. In a sense, you want your users to be addicted to the features your site offers.

All these examples show only one thing – notifications are an important tool that, if used wisely, can help to create higher user engagement.   

HELLO! I’m Here, Please Respond

There are many ways to add notifications to web sites/applications. In the past a developer could have implemented a blinking behavior that would make the icon of the browser blink. Another option would be to add a popup. Both of these options annoyed the users because no one really likes popups or blinking icons all over the place.

Today there are two main ways to notify users that something happened in a web site/application - using desktop notifications via utilities like Internet Explorer 9’s Pinned Sites or using the HTML5 web notifications API. Since the HTML5 web notifications API isn’t a recommendation yet that leaves us with the other utilities. With that in mind let’s start by introducing the Internet Explorer 9’s Pinned Sites, and then we’ll go over the HTML5 notifications API and a couple of other utilities out there.

To Pin or Not to Pin that is the Question

One of the features that can be found on the Windows 7 operating system is the ability to pin programs to the Window Taskbar. When a program is pinned to the Taskbar it can be accessed quickly and enable a popup list that gets you to specific areas or features of the application quickly, such as Tasks, Jumplists, and notifications. These features allowed the developer to expose commonly used program functionality such as creating a new e-mail in outlook or jumping to a frequently used URL in Internet Explorer.

Just like you would ‘pin’ desktop programs, Internet Explorer 9 allows you to pin your most frequently visited websites and applications. This feature, called Pinned Sites, can also enable Tasks, Jumplists, and to use desktop notifications to enhance the user experience. There is no programmatic way to pin a site to the taskbar—it can only be done by the user.

Once a developer adds this feature to their site, there are two options for the user to pin the developer’s site to the taskbar – by tearing the tab from Internet Explorer 9 and dragging it to the taskbar or by dragging the favicon from the address bar of Internet Explorer 9 to the taskbar. The following figures illustrate the process of pining the MSN site to the Windows Taskbar using the second option: 

 

 

Figure 1: Pinning a site

According to Microsoft publications, the sites that take full advantage of the Pinned Sites feature show growing engagement by their users. For example, after integrating Pinned Sites Flixster says that users read 34% more pages and spent 57% more time on their sites.

Use the Wizard!  Or the jQuery Plugin!

Using the Pinned Sites feature is very easy and it is exposed through a set of Meta tags and JavaScript API functions that are included inside Internet Explorer 9.

More recently, Microsoft published the pinning wizard tool that can create site pinning behavior in a few minutes. All the site owner needs to do is to run the wizard, supply some information including the homepage URL and a site icon and then simply integrate the generated line of JavaScript into their website.  

If the site owner prefers to create the behavior by himself he can also use a community-built  jQuery plugin called "Pinify" or just use the JavaScript APIs. In the following section we will explore the JavaScript APIs.

Pinned Sites APIs

To allow developers to activate the Pinned Sites feature, Internet Explorer 9 exposes a set of JavaScript APIs. These APIs are divided into four main parts:

1.      SiteMode API – Exposes the functionality to check whether a site is currently pinned into the Taskbar.

2.      Jumplist API – Handles the creation and updating of Jumplists which will be used when the site is pinned.

3.      Icon Overlay API – Handles the creation of overlay icons for notifications.

4.      ThumbBar Button API – Handles the creation of buttons in the Taskbar Thumbnail View.

Since this article deals with notifications lets dive into the Overlay Icon API which exposes this functionality.
If you want to find out more information about the other Pinned Sites API you can go to the buildmypinnedsite.com tutorial.

Pinned Sites Icon Overlay API

The Icon Overlay API lets your pinned site button display an icon overlay that notifies the user that things need their attention at the website. It’s a much less obtrusive way to notify users compared to the examples we mentioned at the beginning with the popups and blinking icons. If the notification icon is the right shape or color, it will draw the user’s attention to your taskbar button.

The icon overlay will be shown on the lower right corner of the pinned site’s taskbar button. Here is a figure that shows an example for an information icon overlay: 

 

 

Figure 2: Icon Overlay Example

The developer is responsible for creating the notification behavior and it should be used mainly for important statuses such as new mail, new blog posts, network status, messages, etc. Over-using the icon overlay behavior might result in a negative experience for the users, causing them to ignore important notifications or turn them off.

The Overlay Icon API includes two simple functions:

1.      msSiteModeSetIconOverlay – the function allows the site to communicate alerts, notifications and statuses to the users by adding an icon on top of the existing web site icon. The method takes two parameters – an image URL to display and a tooltip value. Here is a simple example of how to use the function:

window.external.msSiteModeSetIconOverlay('/info.ico', 'Attention Needed');

2.      msSiteModeClearIconOverlay – the function clears any existing overlay icon from the pinned site taskbar icon. Here is an example of how to use the function:

window.external.msSiteModeClearIconOverlay();


Here is a full and simple example that shows how to use the Icon Overlay API: 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample Application</title>
    <meta name="application-name" content="Sample Application" />
    <meta name="msapplication-tooltip" content="Sample Application" />
    <meta name="msapplication-starturl" content="./Demo.html" />
    <meta name="msapplication-task" content="name=Dzone;action-uri=http://www.dzone.com;icon-uri=/favicon.ico" />
    <script type="text/javascript">        
        window.external.msSiteModeSetIconOverlay('/info.ico', 'Attention Needed');
        function contentLoaded() {
            document.getElementById('btnRemove').onclick = function () {
                window.external.msSiteModeClearIconOverlay();
            }
        }
        document.addEventListener("DOMContentLoaded", contentLoaded, false);        
    </script>
</head>
<body>
    <form>
    <div class="page">
        <div class="main">
            <input id="btnRemove" type="button" value="Remove Icon Overlay" />
        </div>
    </div>
    </form>
</body>
</html>

In the example when the site loads, and it is pinned, an information icon will be added to the taskbar icon. The web page also includes a button that when clicked will remove the icon overlay. Another way to remove the icon is by setting a timeout and clearing it after a few seconds.

The developer should take into account that he can call the msSiteModeSetIconOverlay more than once before he clears the icon. The last icon that was added will be shown to the user and clearing it will reveal the underneath icon (a Last in first out behavior).

As you can see, the high reward that Pinned Site notifications with minimal effort makes it well worth your time to implement this feature.  Next, we’ll take a look at the HTML5 web notifications, which can be implemented in conjunction with Pinned Sites.  There’s no need to choose between one or the other, you can do both!

The New Kid on the Block

The HTML5 Web Notifications API is a mechanism for building simple notifications that will alert users outside of the web page. These notifications can be used passively or actively and they are not bound to the tab that is currently open. The API relies on a user granting permission for notifications. Without indication that notifications were requested and approved by the user, the notifications mechanism won’t work.

Granting Permissions to HTML5 Web Notifications

The first step for using Web Notifications is to check whether the user wants to be notified about something. The following code sample shows how to use the requestPermission and checkPermission functions that are part of the notifications API:

$('#btnGrantPermission').click(function () {
    if (window.Notifications.checkPermission() == 0) {
        createNotification();
    } else {
        window.Notifications.requestPermission();
    }
});

The sample uses jQuery to bind a click event to a button that will check whether the site has permission to use notifications or not. If permission exists the checkPermission function will return 0 and the createNotification function would be called. If there is no permission then the requestPermission function will be called to request permission to use notifications in the web page. The developer need to be aware that the requestPermission function must run inside an event handler.

Notify the User with HTML5 Web Notifications

In order to use the web notifications API you need to create a notification object. Here is an example of creating a notification using the createNotification function:  
function createNotification() {
    var notification = window.Notifications.createNotification("icon.png", "New HTML5 Notification", "More Content...");
    notification.onshow = function () {
        setTimeout(notification.cancel(), 1500);
    }
    notification.show();
}

The sample shows the use of the createNotification factory function to create a notification. The function gets a URI for an image to show in the notification, a subject string and a content string. After that a handler is wired up to the onshow event which will call the setTimeout function to cancel the notification after 1500 milliseconds. The show function, which is used in the last line, will display the notification to the user. In the specification you can also use the Notification object and instantiate it with the same parameters.

What to Use Then?

As written earlier, the HTML5 Web Notification API is currently in the development phase. Since this is the case, the code that is shown in the article might change over time. Moreover, the only browsers that support the HTML5 Web Notification API are the browsers that use WebKit as their browser engine (Safari, Chrome). This means that using the API is something that is very risky currently. On the other hand IE9 pinned sites are a feature implemented by many of the largest websites such as Twitter, Amazon, IMDb, and many more.

One major difference between Pinned Sites between HTML5 Web Notifications is that Pinned Sites don’t require user permissions. Both of the APIs are easy to implement and don’t require a lot of coding and research. Since this article deals with notifications for web sites on a Windows 7 desktop it didn’t deal with other notification and ‘pinning’ mechanisms that you can find out there such as Fluid for Mac or GWatchman which is a Google services notifier.

Summary

Notifications can provide a good channel of communication between a website and its users. This might create high engagement for the site if the feature is used effectively without annoying the users.

The article showed two ways to create web notifications on a Windows 7 Desktop, including IE9 Pinned Sites and the HTML5 Web Notification API. No doubt that both of the ways have their pros and cons but using either of them might help a website to create a dialog with its users and improve their experience. Good user experience is what brings users back again and again, and that is exactly what websites strive for. 
Published at DZone with permission of Gil Fink, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)