Detecting Idle Browser Tabs: Page Visibility API

The Page Visibility API, introduced back in 2011, provides a great resource for determining which of your browser windows or tabs are currently active or idle.

You'll want to take precautions by implementing idle browser checks in cases where a user leaves a window or tab with active components, like videos, that can interrupt content or playback of videos on another browser window or tab, or prevent unwanted data transfer when inactive.

There are many cases where this can be beneficial, and we'll go over some practical examples below. The main reason for implementing idle browser checks is to ensure a positive user experience, which we'll cover below.

The Page Visibility API Events

These three events can be used to determine a browser window or tab's current visibility state:

• visibilitychange: This event allows listeners to know the current visibility state of the window or tab that has changed.
• visibilityState: Denotes the current window or tab's current visibility state. Valid values are visible, hidden, or prerender.
• hidden: An attribute that returns a boolean value, true when the window or tab is hidden, or false when the window or tab is visible.

Example #1: Pause Video Playback

In this example, we'll pause the video's playback as soon as the browser tab or window becomes inactive or hidden. As mentioned previously, this is especially helpful and considerate of users who don't want to waste their bandwidth on content that they're not even viewing.

To illustrate this, embed a simple HTML video tag:

<video id="my-video">
	<source type="video/mp4" src="my_video.mp4" />
</video>

Now, create an event listener to the visibilitychange event that will detect whether the browser window or tab state has changed and update the video's playback state as needed:

document.addEventListener("visibilitychange", function() {
	var video = document.getElementById("my-video");
	
	return (document.hidden) ? video.pause() : video.play();
});

This example will pause the video playback if the window or tab is in a hidden state, and resume play once visible again.

Note: Many mobile browsers do not allow automatic video playback unless at least one user action has already taken place within the web page after its initial load. So, if you load a web page in a mobile browser, then immediately move to another tab without an initial interaction on the web page and come back, the video may not play.

Example #2: Asynchoronous Loading with Webpack

The Page Visibility API can also be used for UX enhancements. Say, for example, the user is viewing another browser window or tab, but you still want to load the remaining assets in the background so they're prepared for when the user returns. This can be handled using asynchronous loading techniques.

We'll be using Webpack's dynamic import() method to complete this task, and the code could look something like this:

var is_loaded = false;

document.addEventListener("visibilitychange", function() {
	if (!is_loaded && document.visibilityState === "visible") {
		Promise.all([
			import("./lodash"),
			import("./moment"),
			import("./dist"),
			import("./images")
		}).then(function() {
			is_loaded = true;
		});
	}
});

The browser will cache all assets included in the import() methods, and the entire app will be fully loaded once the user returns to the browser window or tab.

Other Useful Tidbits

• The visibility state of an iframe is the same as its parent document. If the browser tab is inactive, the containing document and any included iframes also become inactive.
• Most browsers will stop sending requestAnimationFrame() callbacks when the browser window or tab is inactive to improve performance and device battery life.
• Time-based events are throttled when the browser window or tab becomes inactive to help improve performance, as well.

Conclusion

A great user experience doesn't always mean flashy on-screen objects and animations. Sometimes, it can simply mean taking many of your user's real-life scenarios into thought and designing your application's frontend and backend with that in mind.

Not everyone in the world has blazing fast internet speeds, so considering all aspects of your application, even when behind the scenes, can benefit both you and your users.

I hope you can find great ways to implement the Page Visibility API for optimizing your web applications.