DEV Community

Kenji Tomita
Kenji Tomita

Posted on

Detecting Page Visibility Changes with the Page Visibility API

#html

In web applications, there are scenarios where you might want to execute specific actions where a user returns to your page (i.e., when the page becomes active again).
For instance, you may wish to display the latest notifications or refresh the content when a user switches back to your tab after browsing other tabs. The Page Visibility API provides an effective way to detect when a page becomes visible to the user and trigger corresponding actions.

What is the Page Visibility API?

The Page Visibility API allows developers to determine the visibility state of a webpage.
It primarily utilizes the following properties and events:

  • document.visibilityState: Returns a string indicating the visibility state of the document. Possible values include visible and hidden
  • visibilitychange event: Fired when the visibility state of the document changes.

By leveraging this API, you can control the behavior of your application based on whether the page is currently visible to the user.

Implementation Example

The following code demonstrates how to display and alert when the page becomes visible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Visibility Test</title>
  <script>
    function updateVisibility() {
      if (document.visibilityState === 'visible') {
        alert('Page is visible');
      }
    }

    document.addEventListener("visibilitychange", updateVisibility);

    // Check initial visibility state
    updateVisibility();
  </script>
</head>
<body>
  <h1>Test Page</h1>
  <p>This is a test page to check visibility change events.</p>  
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this example, the updateVisibility function checks if the page is visible and displays an alert accordingly. The function is called both on page load and whenever the visibility state changes.

When Does document.visibilityState === 'visible'?

The document.visibilityState becomes visible in the following situations:

  1. Switching back to the tab from another tab
    • When a user navigates from a different browser tab back to your page
  2. Restoring a minimized browser window
    • When a user minimizes the browser window and then restores it.
  3. Returning to the browser from another application
    • When a user switches from another application back to the browser where your page is open.
  4. Unlocking the device sreen
    • When a user unlocks their devices, bringing the browser (and your page) back into view.

In there scenarios, the page transitions from a hidden to a visible state, triggering the visibilitychange event.

Summary

The Page Visibility API is a valuable tool for detecting when a user returns to your page, allowing you to execute specific actions such as updating content or resuming media playback. By monitoring the visibility state, you can enhance the user experience and optimize resource usage in your web applications.

For more detailed information and examples, refer to the MDN Web Docs on the Page Visibility API

Top comments (0)