How can it be detected if a page is on background or foreground with jquery/javascript?

Question

The title explains itself. How can I detect if a web page has gone to background?

I'm implementing a chat application and I'll use this information to decide showing new message notifications. I suppose that GMail uses something like that. If the page is on background, it shows desktop notifications (on chrome), if not it doesn't show them.

Answer 1

I know that the answer has already been selected but I wanted to share another way.

You can use the hasFocus method on the document to see if it has the focus. There is no reason to set your own variable.

Here's some proof of concept code. jsFiddle is at the bottom. Every 3 seconds it will check if the window has focus or not–displaying true or false.

HTML:

<p>This will show if the document has focus every three seconds</p>
<button id="go">Go</button>
<button id="stop">Stop</button>

<ul id="active_log">
</ul>

CSS:

#stop { display: none; }

Javascript inside on document ready:

var timeout = null;

var checkActive = function() {
    var isActive = window.document.hasFocus(),
        $activity = $("<li />").text(isActive.toString());

    $('#active_log').prepend($activity).find('li:nth-child(n+6)').fadeOut(function() {
        $(this).remove();
    });

    timeout = setTimeout(checkActive, 3000);
}

$('#go').click(function() {
    $(this).hide().siblings('button').show();
    checkActive();
});

$('#stop').click(function() {
    $(this).hide().siblings('button').show();
    clearTimeout(timeout);
    timeout = null;
});

http://jsfiddle.net/natedavisolds/2D7za/1/

Answer 2

There's now a page visibility API for this, and it is well-supported by all the most recent versions of major browsers on Windows, Mac OS X, and Linux (though I have not actually tested all browsers with a fair share of the Linux browser market).

The page visibility API is now the best approach for checking visibility; the only caveats are that it can't tell you what parts of the browser window are visible (just that nothing is visible or at least some part is), and that support has only been present since 2016 on Linux, 2015 on Mac, and 2014 (possibly earlier) on Windows.

While support was being rolled out, a false negative was rare, but false positives occurred on some platforms; for example, in 2014, OSX rendered miniature versions of minimized applications in the dock, and as a result of the way this had been done, an application could not easily tell whether it was minimized, as it was still asked to paint the screen. Linux had complications with knowing whether your application was on a non-visible workspace, and whether another window was occluding it.

The first public draft was published in June, 2011, and it reached "recommendation" status in May 2013. By March, 2014, the most recent versions of all major Windows browsers had full support for the standard. Full support for all major Mac browsers was achieved in April, 2015. Linux support was achieved for at least Chromium by August of 2016 (when Chromium issue 293128 was closed); while I have not tested them, I expect other Linux browsers have likely kept pace, as the hardest part of the work seems to have been adjusting OS/GUI tookit contracts and APIs to make knowing whether your desktop application is visible possible.