How to Display Update Notifications in the Browser Tab

Websites and web apps with frequently updated content have to figure out a way to grab users’ attention to tell them of updates, particularly where users may have moved away from the tab where the website or app is active.

There are a couple of common patterns which you’ll see out in the wild. Social websites such as Facebook, Twitter, and LinkedIn, which potentially receive new content every few seconds, insert the relevant number into the page title showing the amount of new updates in the tab. Trello, on the other hand, shows a tiny red badge on the favicon.

Trello Facebook and Twitter notifications — Trello, Facebook and Twitter notifications

In this tutorial, we are going to replicate this form of feedback design, making use of the browser tab as a medium for notifying users of updates. Check out the demo then let’s see how it’s done.

Using the Document Title

We’ll begin by appending the number of new updates to the page title, similar to how Facebook and Twitter do.

In a real world scenario we might retrieve data in any number of ways (talk to your friendly developer). In this case, we’ll assume that we’ve retrieved the number of updates and have the figure available to us to play with in JavaScript. For now, it appears that we currently have zero updates, so we’ll pass that number to a variable:

1	var count = 0;

The next will be the meat of our code where we will alter the document title. First of all, we add document.title which will retrieve our current document title:

1	var title = document.title;

Then we create a new function to change the string within that title:

function changeTitle() {
	count++;
	var newTitle = '(' + count + ') ' + title;
	document.title = newTitle;
}

Here you can see that we use the JavaScript ++ operator. For the purposes of our demonstration the ++ will increase our count number by 1 for each iteration. As we started off with 0, the next iteration will return 1. We use the ++ operator to simulate the number increment, since we do not have access to an API to feed us with a real number.

Next we create another new function that will run the changeTitle() function:

function newUpdate() {
	update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

The above function assumes that we need to check for new updates every 2000 milliseconds (2 seconds). Our function, changeTitle(), will continuously run within the interval. We run this function as soon as the page is loaded.

The first method is quite straightforward. We retrieve the number and pass it in the title. You may change the brackets that wrap the number from ( ) to [ ] or { } by changing them in the changeTitle() function.

Using the Favicon

Now we are going to try the second approach, which is to change the favicon like the Trello web app does. For this, we will need to prepare two favicon variants, where the second variant is the alternative that we will display whenever we received new updates.

Begin by linking the first favicon within the document.

1	<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>

Then set the path of the new favicon in a JavaScript variable.

1	var iconNew = 'img/favicon-dot.gif';

As with the first approach, we will also create two functions:

function changeFavicon() {
	document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
	update = setInterval(changeFavicon, 3000);
	setTimeout(function() { 
		clearInterval( update ); 
	}, 3100);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

The first function, changeFavicon(), will replace our initial favicon with the one with the red badge. The second function, newUpdate(), will execute the first function within the specified time.

It seems there is something new to look at!

The second approach is not as complicated as you may have first thought; it is, in fact, simpler than the first one where we updated the page title string. Additionally, we can pour more creativity into the alternate favicon. For example, we could make the red badge blinking rather than still (be careful now..), or perhaps change the entire favicon color and icon.

Note: Chrome does not support favicons with animated GIF.

Using Favico.js

To finish off, we are now going to use a JavaScript library called Favico.js, developed by Miroslav Magda. The library provides a handy API with tons of options to alter the favicon such as showing a badge along with the number of updates all together.

To begin with, using JavaScript, we define a new Favico instance which defines the badge position, animation, the background color as well as the text color.

var favicon = new Favico({
	position  :'up',
	animation :'popFade',
	bgColor   :'#dd2c00',
	textColor :'#fff0e2'
});

Then we add a couple of functions to run this new instance and ultimately show the badge in the favicon.

var num = 0;
function generateNum() {
	num++;
	return num;
}

function showFaviconBadge() {
	var num = generateNum();
	favicon.badge(num);	
}

function newUpdate() {
	update = setInterval(showFaviconBadge, 2000);
}

var docBody  = document.getElementById('site-body');
docBody.onload = newUpdate;

The code somewhat resembles the first method we did earlier. We begin with creating the function that will simulate the number of updates that we will show within the badge. The second function, showFaviconBadge(), is to insert the number into the badge and show the badge in the favicon. The last function newUpdate() will run the second function within the specified time interval, giving us a sense of receiving new updates.

Conclusion

In this tutorial, we have used the browser tab as a medium to notify users. We have replicated methods that are commonly applied in popular websites like Facebook, Twitter, and Trello along with evaluating their limitations.

Again, you’ll probably have to make a couple of changes to make this fit it in your particular web application, but the examples here give you a great start!