How to display the number of alerts in the browser tab title

Websites and web applications with constantly updated content should notify about updates if the user leaves the tab but does not close it.

There are a couple of common ways to alert a user. On the one hand, the social networks Facebook, Twitter and LinkedIn indicate a certain number, which corresponds to the number of updates. Trello, on the other hand, displays a small red circle on top of favicon.


Trello, Facebook, and Twitter Alerts

In this lesson, we will recreate such alerts. Check out the demo to understand what we will do.

View on GitHub
Demo (Russian)

Use the page title

We'll start by adding the number of updates to the page title, just like Facebook and Twitter did.

There are many ways to extract data (ask a friend of the developer). In our case, we assume that we already know the number of updates and now we can play around with JavaScript. At the moment we have zero updates:

var count = 0;

The following is the main part of the code that will change the name of the page. First of all, add  document.title, which gets the current page name:

var title = document.title;

Then create a new function that will change part of the name:

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

Here you see that we are using the JavaScript operator  ++. For demonstration purposes, " ++" increase the number  count by  1.

Now create a new function that runs  changeTitle():

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

The function above will check for updates every  2000 milliseconds (2 seconds). The function will start as soon as the page loads.



The first method is pretty straight forward. We get the number of updates and pass it in the name. You can change the brackets from  ( ) to  [ ] or  { } in a function changeTitle().

Using favicon

Now we use the second approach, which changes  favicon , the Trello web application. To do this, we need to prepare two options favicon. The first - when there are no updates, the second - when updates appeared.



We start by binding favicon to the document.

Then we specify the path to the new favicon using the JavaScript variable.

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

As in the first method, we 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 original favicon with the one with the red circle. The second function,,  newUpdate()will fulfill the first function after a certain period of time.


It seems there is something to see!

The second method is not as complicated as it seems at first glance - on the contrary, it is simpler than the first, where we updated the page name. In addition, we can be a little creative by adding animations to favicon. But without much fanaticism.

Note : Chrome does not support favicon with animation.

Using Favico.js

So, the last way is to use the JavaScript library Favico.js , authored by  Miroslav Magda . The library provides a convenient API with many different options.

We will start by specifying the parameters of the new  Favico: position, animation, background color, text color.

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

Then we add a couple of functions that will start the whole process and ultimately display the badge on 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;

To some extent, our code resembles the first method. We start by creating a function that will simulate the number of updates. The second function  showFaviconBadge(),, will insert this number into the badge and display the badge itself in favicon. The last function  newUpdate() will launch the second at a certain interval.

Conclusion

In this tutorial, we learned how to use the name of a browser tab as a means to alert users. We recreated the techniques that are used on popular websites such as Facebook, Twitter, and Trello.

Once again, you will most likely have to make a couple of changes to suit the needs of your project. But the examples provided will serve as a great start!

From the translator . With all wishes and comments regarding the translation, please contact me in PM. Thanks!