DEV Community

Hemant Sharma
Hemant Sharma

Posted on • Originally published at hemantsharma.tech on

Page Visibility API

#pagevisibilityapi #javascript #browserapis

Introduction

The Page Visibility API provides events you can watch for to know when a webpage is visible or in focus or not. This can be useful for saving resources or improving user experience when the user is not actively interacting with the page.

How to use Page Visibility API

The Page Visibility API provides two events that you can listen for: visibilitychange and fullscreenchange.

Here is an example of how to use the visibilitychange event to detect when the page is hidden or visible:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("Page is hidden");
  } else {
    console.log("Page is visible");
  }
});
Enter fullscreen mode Exit fullscreen mode

You can also use the document.hidden property to check if the page is currently hidden or visible:

if (document.hidden) {
  console.log("Page is hidden");
} else {
  console.log("Page is visible");
}
Enter fullscreen mode Exit fullscreen mode

Let's see it in action

To see the Page Visibility API in action, let's create a simple web page that logs the visibility state of the page:

<body>
  <h1>Page Visibility API Example</h1>

  <script>
    document.addEventListener("visibilitychange", function() {
      if (document.hidden) {
        console.log("Page is hidden");
      } else {
        console.log("Page is visible");
      }
    });
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

In this example, we are logging the visibility state of the page whenever the visibilitychange event is triggered.

Practical Applications

The Page Visibility API can be incredibly useful in various scenarios:

  • Pause/Resume Animations and Videos: Automatically pause animations or videos when the page is hidden and resume them when the page becomes visible again.
  • Optimize Resource Usage: Save CPU and memory by stopping resource-intensive tasks when the user is not actively interacting with the page.
  • Track User Engagement: Monitor user engagement by tracking how often and how long users keep your webpage in focus.

By incorporating the Page Visibility API into your web applications, you can create a more efficient and user-friendly experience. Start using this powerful API today and take your web development skills to the next level!

The Page Visibility API can be useful for scenarios where you want to pause or resume animations, videos, or other resource-intensive tasks based on whether the page is visible or not. It can also be used to track user engagement and optimize the user experience based on the visibility state of the page.

Originally published at https://hemantsharma.tech/blog/6.

Top comments (0)