How can you detect user focus and attention in HTML5?

1 Visibility API

The Visibility API allows you to detect when the user switches to or away from your web page or browser tab. You can use this information to pause or resume animations, videos, or audio, or to save or restore the state of your application. To use the Visibility API, you need to listen to the visibilitychange event on the document object and check the document.hidden property. For example:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    // the page is hidden, do something
  } else {
    // the page is visible, do something else
  }
});        

2 Page Visibility API

The Page Visibility API is an extension of the Visibility API that provides more details about the visibility state of the page. It adds the document.visibilityState property, which can have one of four values: visible, hidden, prerender, or unloaded. The visible state means that the page is in the foreground and the user can interact with it. The hidden state means that the page is in the background or minimized. The prerender state means that the page is being rendered in a hidden tab before the user switches to it. The unloaded state means that the page is being unloaded or navigated away from. You can use the Page Visibility API to optimize the performance and resource usage of your web application. For example:

document.addEventListener("visibilitychange", function() {
  switch (document.visibilityState) {
    case "visible":
      // the page is visible and interactive, do something
      break;
    case "hidden":
      // the page is hidden or minimized, do something else
      break;
    case "prerender":
      // the page is being prerendered, do nothing
      break;
    case "unloaded":
      // the page is being unloaded, do some cleanup
      break;
  }
});        

3 User Activity API

The User Activity API allows you to detect when the user is active or idle on your web page. You can use this information to trigger notifications, reminders, or other actions based on the user's engagement level. To use the User Activity API, you need to create a new IdleDetector object and call its start method with some options. The options include a threshold in milliseconds that defines how long the user has to be inactive to be considered idle, and a signal that can be used to cancel the detection. The IdleDetector object emits two events: change and error. The change event fires when the user's state changes from active to idle or vice versa. The error event fires when there is a problem with the detection. For example:

const idleDetector = new IdleDetector();
const controller = new AbortController();
const signal = controller.signal;
idleDetector.addEventListener("change", function() {
  if (idleDetector.userState === "active") {
    // the user is active, do something
  } else {
    // the user is idle, do something else
  }
});
idleDetector.addEventListener("error", function(error) {
  // handle the error
});
idleDetector.start({
  threshold: 60000, // 1 minute
  signal: signal
});
// to stop the detection, call controller.abort();        

4 Interaction Media Features

The Interaction Media Features are a set of CSS media features that allow you to query the user's input preferences and capabilities. You can use them to customize the layout, style, or behavior of your web page based on the user's input mode, such as mouse, keyboard, touch, or stylus. These media features include pointer, hover, any-pointer, and any-hover. You can use these media features in media queries or in the @media rule. For instance, you can set a style only if the primary pointing device is coarse or any pointing device can hover over elements. This way, you can ensure a great user experience no matter how your users interact with your website.

5 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?