Page Visibility API

The Page Visibility API tells you if the current page is visible or not and also informs you when the page becomes hidden or visible. 

This API is supported in almost all browsers, you can find the full list here.

Uses

Before we go into the details of the API, it is helpful to know why its useful to us.

When a page is in the background, you can do the following things

  • pause videos and animations so since the user is not looking at it anyway
  • Slow down or stop updates from your server thereby saving user bandwidth and lessening load on your servers.
  • Notify the user of events via notifications so that they can get back to your website.
  • Monitor how long users actually spend on your website and pages.

API Methods

document.hidden

document.hidden returns true if the entire page is currently hidden.

document.visibilityState

It has four possible values which specify finer level of detail about the visibility of the page.

a) Visible – Document is completely visible

b) hidden – Document is completely visible

c) Document is loaded but is offscreen

d) unloaded – the document is not loaded

visibilitychange

This is an event that you can listen to which gets triggered when the visibility of the page changes

Example:

document.addEventListener("visibilitychange", function(){
if(document.hidden == true){
console.log('the page is now completely hidden');
}else{
console.log('the page is now visible');
}
});
Share this!

Leave a Reply

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