How to make same "new" Gmail notification?

Interesting question. I made an example using jQuery and Javascript.

The first step is a function that traverses items that are potentially new and adds the label when needed:

//marca itens novos
function highlightItems() {
    console.log('--- highlightItems ---');
    //percorre todos os itens
    $('.item-novo').each(function() {
        console.log($(this).text());
        //verifica se o item é recente
        var adicionado = $(this).data('adicionado');
        if (!adicionado || adicionado > updateTimestamp) {
            //cria marcador
            var marcador = $('<span class="new">novo!</span>');
            //adiciona ao item
            $(this).append(marcador);
            //agenda desaparecimento
            marcador.delay(3000).fadeOut(1500, function() { $(this).remove(); });
            //atualizada momento em que foi exibido para não exibir depois
            $(this).data('adicionado', updateTimestamp);
        }
    });
    updateTimestamp = Date.now();
}

If items are added via Ajax, they should be marked with the CSS class item-novo , as <div class="item">...</div> .

Still in the example, the items that come from the server should come with a data-adicionado attribute, whose value should be an integer ( timestamp ) representing the date of the item.

The variable updateTimestamp should contain the date that the server last returned data to the user.

In addition, you can add events to detect when the user is looking at your page. The focus event of the window ( window) will be triggered when the user clicks any part of the window or frame. You can also check that the user has the mouse over the window for some time, using the mousemove event and a timer .

Putting all this together I made the following event handlers:

//lembra se a janela recebeu o foco
var janelaTemFoco = false;

//timer para atualizar a página
var refreshInterval = setInterval(function() {
    //executa ação apenas se o usuário estiver vendo a janela
    if (janelaTemFoco) {
        highlightItems();
    }
}, 1000);

//eventos de foco da janela
$(window).focus(function() {
    console.log('--- focus ---');
    janelaTemFoco = true;
    highlightItems();
});
$(window).blur(function() {
    console.log('--- blur ---');
    janelaTemFoco = false;
});
//se o usuário parar o mouse, também mostra
var mouseInterval = 0;
$(window).mousemove(function() {
    console.log('--- mousemove ---');
    if (mouseInterval == 0) {
        clearInterval(mouseInterval);
        mouseInterval = setTimeout(highlightItems, 1000);
    }
});
$(window).mouseout(function() {
    console.log('--- mouseout ---');
    clearInterval(mouseInterval);
    mouseInterval = 0;
});

The first event ( focus ) also highlights items each time the user returns with focus to the window. The blur event prevents items from being highlighted when the user moves to another window.

Finally, the mousemove and mouseout events identify if the user has the mouse for at least a second on the window and then highlights the items. Otherwise, for example, if the user just flicked the mouse over the window, it does nothing.

I did a functional test, but without the update part of the server. Items are randomly generated every 5 seconds.

Demo on Jsfiddle

All messages have a status , and it controls the message display (a simple replace of CSS classes). In the case of ajax requests, yes, they exist, but they are executed periodically. Gmail relies heavily on LocalStorage to ensure performance.

If you have JSON to store your messages:

{
    id : 123456789456,
    subject : "Teste"
    status : 1 // Nova mensagem
} (...)

It's simple to apply this concept by basing it on periodic communication with the server, using for example the loop pattern that does not encapsulate requests:

function sync() {
    setTimeout(function() {
        // Faz operações de sincronização

        if (finished) // Se a operação atual terminou
            sync(); // Re-executa a função
    }, 30000); // Sincroniza a cada 30 s
}