Implement page visibility control using HTML5 Page Visibility API

Earlier our browsers did not have tabbed browsing feature but today when you check all available browsers we can see that all browsers provide This function. As a programmer, I usually have 10-15 tabs open at a time, and sometimes this number exceeds 25-30.

Why use this API?

Previously, there was no way to determine which tab was active and which tab was active, but with the HTML5 Visibility API we can detect if a visitor is viewing our web page.

In this tutorial, we will learn how to deal with the HTML5 Visibility API and a simple demonstration to discover the state of the page. In this demo, we will change the document title based on the page visibility state.

Check the visibility status of the page

With the introduction of this API, we welcome two new document properties that serve two different functions. The first is document.visibilityState and the second is document.hidden.

document.visibilityState contains four different values ​​as follows:

• Hide: The page is not visible on any screen
• Pre-rendering: The page loads off-screen and is invisible to the user

• Visible: Page visible

• Unloaded: The page is about to be unloaded (the user is leaving the current page)

document.hidden is a Boolean property that is set to false if the page is visible and set to true if the page is hidden.

Now we can control how our website behaves when it is hidden from users.

We know our availability property right away, but now it's time to listen to the event so that we can be notified of new situations regarding the page's visibility. This is done via the visibilitychange event. We'll see a quick demonstration on how to handle this event.

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

This code is just a basic example of utilizing this event and discovering the current state of the web page. But just so you know, these properties and methods should all use vendor prefixes because these events and properties are vendor-prefixed in some browsers. Now we'll see the same code cross-browser:

// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  
  // Check for the unprefixed property.
  if ('hidden' in document) {
    return null;
  }

  // All the possible prefixes.
  var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

  for (var i = 0; i < browserPrefixes.length; i++) {
    var prefix = browserPrefixes[i] + 'Hidden';
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }

  // The API is not supported in browser.
  return null;
}

// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  } else {
    return 'hidden';
  }
}

// Get Browser Specific Visibility State
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  } else {
    return 'visibilityState';
  }
}

// Get Browser Specific Event
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  } else {
    return 'visibilitychange';
  }
}

We have all the browser prefix properties and the events are ready to be applied. Now we will change the previous code accordingly.

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document.addEventListener(visibilityEvent, function(event) {
  if (!document[hidden]) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

Where can we use this API?

We can consider using this API in many different scenarios.

1. Suppose you are on a dashboard and the page is polling at regular intervals (say two minutes) for details of some RSS feed or API. Therefore, we can limit calls to the RSS feed or API if the page is not visible to the user (i.e. the user is not actually viewing the page).
2. is used for image slider. We can limit the movement of the slider image when the page is hidden.

3. In a similar way, we can show HTML notifications only when the page is hidden from the user.

So far we've seen the code that uses the HTML5 Page Visibility API, it's time to take some immediate action.

Demo

• Demo 1: This demo shows how to use the Page Visibility API to change the page title. View demo
• Demo 2: This demo demonstrates how to limit polling of data from the server when the page is inactive.

In this demo we will look at how to restrict polling the server for the latest information, but only while the user is viewing the page. I'm assuming jQuery is already included in your page. Here we will just increment the count, but this could be replaced with real server polling.

HTML

<!-- This element will show updated count -->
<h1 id="valueContainer">0</h1>

JavaScript

<script type="text/javascript">
    
	// Get Browser Prefix
	var prefix = getBrowserPrefix();
	var hidden = hiddenProperty(prefix);
	var visibilityState = visibilityState(prefix);
	var visibilityEvent = visibilityEvent(prefix);
	
	var timer = null;
	
	function increaseVal() {
		var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
		$('#valueContainer').text(newVal);
		document.title = newVal + ': Running'; 
		
		timer = setTimeout(function() {
			increaseVal();
        }, 1);
	}
	
	// Visibility Change 
	document.addEventListener(visibilityEvent, function(event) {
		  if (document[hidden]) {
			  clearTimeout(timer);
			  var val = parseInt($('#valueContainer').text());
			  document.title = val + ': Pause'; 
		  } else {
			  increaseVal();  
		  }
	});
	
	increaseVal();
	
</script>

Demo view

Browser support

If you want to see browser support for this API, then I recommend checking out Can I use it? . But to find browser support programmatically, I recommend reading this article to detect support for various HTML5 features. So far, we have good support for this API in almost all major and latest browsers.

in conclusion

I would like to say that we have a very good API that only consists of two properties and an event. This way, it can be easily integrated with your existing applications, which may have a positive impact on your user experience. Finally, now we can control how our sites behave when they are hidden from users.

The above is the detailed content of Implement page visibility control using HTML5 Page Visibility API. For more information, please follow other related articles on the PHP Chinese website!