Categories

Page Visibility

Posted on: June 27, 2016 by Dimitar Ivanov

Often, web user opens multiple web pages at same time. Due the characteristics of the web app, often we need to know whether the page is visible. Based on this information, certain actions can be performed. Fortunately, the web platform introduces the Page Visibility API.

Visibility States

The document can be in one of the following visibility states:

hidden
the document is not visible
visible
the document is visible
prerender
the document is loaded, but not yet visible
if (document.visibilityState === 'hidden') {
    // pause, stop, hold something
}

if (document.visibilityState === 'visible') {
    // play, resume, animate, draw something
}

if (document.visibilityState === 'prerender') {
    // track pageview
}

visibilitychange event

When the visibility state of the document is changed the user agent fires a simple event named visibilitychange.

function handleVisibilityChange(event) {
    // Depending of state do something
}
// Handle page visibility change
document.addEventListener('visibilitychange', handleVisibilityChange, false);

Benefits

Use of this specification will help to optimize the CPU usage of a web application. The picture below shows how much CPU time (in percentage) using our web application when it is visible.

Page visibility (visible) CPU usage
Figure 1. Page visibility (visible) CPU usage

This image shows zero CPU time because the CPU-expensive program is not performed while the document is hidden.

Page visibility (hidden) CPU usage
Figure 2. Page visibility (hidden) CPU usage

Use cases

Let's see where to use the Page Visibility API:

  • Image slider - do not switch to the next slide while the page is hidden.
  • AJAX polling - save server resources by doing requests only when the document is visible.
  • Playing videos - pause/resume a video depending on the document's visibility state.
  • HTML5 Canvas animation loop (browser games) - pause animation when the tab or window lost the focus.
  • HTML5 Notifications - displays notifications only when the page is not visible.
  • Tracking pageviews - hit a counter when visibility state change to prerender.
Example

See live example - drawing canvas animation.

The code below creates an animation, using the HTML5 Canvas element, which will react (stop/resume) at visibility change.

var context,
    canvas = document.createElement('canvas'),
    width = 320,
    height = 240;
    
canvas.width = width;
canvas.height = height;

context = canvas.getContext('2d');
document.body.appendChild(canvas);

function draw() {
    if (document.visibilityState === 'visible') {
        window.requestAnimationFrame(draw);
    }
    context.clearRect(0, 0, width, height);
    var i, w, h;
    for (i = 0; i < 10; i++) {
        w = width / 10;
        h = Math.floor(Math.random() * (height - height * 0.2 + 1)) + height * 0.2;
        context.fillStyle =  i % 2 === 0 ? '#BBB' : '#DDD';
        context.fillRect(i * w, height - h, w, h);
    }
}

draw();

function handleVisibilityState(event) {
    if (document.visibilityState === 'visible') {
        draw();
    }
}
document.addEventListener('visibilitychange', handleVisibilityState, false);

Browser Compatibility

Page Visibility API is supported by all modern browsers, including IE 10+, Edge, Firefox 10+, Chrome 14+, Opera 12.1+, Safari 6.1+

Conclusion

Nowadays a web application performance is essential. Utilizing the Page Visibility API can optimize the use of server resources and improve the user experience. So, for heavily loaded apps or busy servers is highly recommended the use of this API.

See also
References
Share this post

Tell me your thoughts about the page visibility, leaving a comment below. And don't be shy to share this post. Thanks for reading!


0 Comments

Comments are closed