Page Visibility in HTML5

HTML5

It is quite common for someone to browse web with multiple tabs or its very rare to see people using browser with single Tab. We open different websites in multiple tabs and tend to switch between them based on our interest at that point of time.

It is important for a web developer to consider this behavior of the user especially when you are designing a web application that include processor and memory intensive content like Image Scrollers, Animations, Ajax Polling etc. All these things eat your system resources that can be better utilized elsewhere if your web page isn’t using them when it is not visible.

As a work-around to the problems similar to the above, the Page Visibility API is introduced in HTML5. Page Visibility provides a great way to improve user experience on modern websites by making current visibility state of the page to developer. For instance, you have an JavaScript Animation that moves circles or some kind of design in the background of your page. It makes sense to pause it when the user is not viewing the page.

As per W3C –

“The Page Visibility specification defines a means for site developers to programmatically determine the current visibility of a document and be notified of visibility changes. Without knowing the visibility state of a page, web developers have been designing webpages as if they are always visible. This not only results in higher machine resource utilization, but it prevents web developers from making runtime decisions based on whether the webpage is visible to the user. Designing web pages with knowledge of the page visibility will allow for improved user experiences and power efficient sites.”

Checking if a Page is Visible

Page Visibility has added two properties to the document object.

enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };
partial interface Document {
  readonly attribute boolean hidden;
  readonly attribute VisibilityState visibilityState;
};
  • document.hidden – a boolean representing whether the page is visible or not
  • document.visibilityState – this gives more information about the state of the page and have 4 possible values
    • hidden – not visible on any screen
    • visible – visible to the user
    • prerender – the page loaded off-screen and is not visible
    • unloaded – the user is navigating away from the page
Monitoring Page Visibility Status using Event

True value for Page Visibility comes only when it is able to tell when the visibility of a page is changed. Page Visibility introduced a new visibilitychange event which is fired on document whenever the page gains or loses focus.

if(document.addEventListener)
{
     document.addEventListener("visibilitychange", visibilityChanged);
}
function visibilityChanged()
{
     if(document.hidden)
     {
          // Page is Hidden
     }
     else
     {
          // Page is Visible
     }
}

or in shortcut –

document.addEventListener('visibilitychange', function(event) {
  if (document.hidden) {
    // The page is hidden.
  } else {
    // The page is visible.
  }
});
Browser Support

Browser support for Page Visibility is good. Currently following browser versions are supporting it.
IE: > 10, Firefox: > 30, Chrome: 27
For more browsers and updated information, please check http://caniuse.com/#feat=pagevisibility

References

Leave a Comment

Your email address will not be published. Required fields are marked *