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:

</span>
 lang="en">

   charset="UTF-8" />
   name="viewport" content="width=device-width, initial-scale=1.0"/>
  Visibility Test
  
    function updateVisibility() {
      if (document.visibilityState === 'visible') {
        alert('Page is visible');
      }
    }

    document.addEventListener("visibilitychange", updateVisibility);

    // Check initial visibility state
    updateVisibility();
  


  Test Page
  This is a test page to check visibility change events.  





    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:
Switching back to the tab from another tab


When a user navigates from a different browser tab back to your page


Restoring a minimized browser window


When a user minimizes the browser window and then restores it.


Returning to the browser from another application


When a user switches from another application back to the browser where your page is open.


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