Day 03: Learning JavaScript APIs: Page Visibility API

Ever had a YouTube tutorial playing in one tab while you’re busy working in another, only to realize later that the video is still running? Most of the time, you don’t even remember which tab it’s playing from. And if you’re anything like me, you have too many tabs open to start hunting for it. That random video running in the background is silently draining your battery and consuming resources.

You don’t want the apps you build to work like that. Thankfully, JavaScript has the Page Visibility API, which lets you detect when a user has switched away from your app’s tab. With it, you can pause unnecessary tasks and save your users' precious battery life.

Today, we’re going to learn all about the Page Visibility API: what it is, why it’s useful, and how you can use it to build better apps.

By the end of this article, you’ll walk away knowing exactly how to integrate this API into your projects.

What is the Page Visibility API?

The Page Visibility API is a browser feature that helps developers figure out if a webpage is visible or hidden to the user. When a user switches to another tab or minimizes the browser, this API triggers an event that can adjust your app’s behavior accordingly.

Why Use the Page Visibility API?

This API is incredibly handy in making your apps smarter. Here’s how it can help:

1. Pause Resource-Heavy Tasks: Stop animations, videos, or timers when users aren’t actively viewing your app.
2. Save Battery Life: Especially useful for mobile users with limited battery power.
3. Improve User Experience: Automatically resume paused tasks or even greet users when they return to your app.

How the Page Visibility API Works

The API revolves around two key features:

• document.hidden: A boolean that tells you whether the page is hidden (true) or visible (false).
• visibilitychange Event: Fires whenever the visibility of the page changes.

Here’s a basic example to show how it works:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('The page is hidden.');
  } else {
    console.log('The page is visible.');
  }
});

When the user switches tabs or minimizes the browser, this event runs, logging whether the page is visible.

Things You Can Do with the Page Visibility API

1. Pause and Resume a Timer

If your app has a timer, you can use this API to pause it when the user switches tabs and resume it when they return.

let timer;
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(timer);
    console.log('Timer paused.');
  } else {
    timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
    console.log('Timer resumed.');
  }
});

2. Greet Users When They Return

Add a personalized touch to your app by welcoming users back when they return.

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    alert('Welcome back!');
  }
});

3. Optimize Resource Usage for Videos

Make your app more efficient by pausing videos when the user leaves the page.

const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    video.pause();
    console.log('Video paused.');
  } else {
    video.play();
    console.log('Video resumed.');
  }
});

Browser Support

The Page Visibility API is well-supported across modern browsers like Chrome, Firefox, Edge, and Safari. For older browsers, you might want to implement a fallback.

How to Check Browser Compatibility:

You can check compatibility on MDN’s Page Visibility API page.

Limitations

While this API is fantastic, it’s important to know its limits:

1. Not a Substitute for User Engagement: The API only tells you if the page is visible—not if the user is actively interacting with it.
2. Behavior May Vary by Browser: Some browsers may not fire the visibilitychange event in all scenarios, so always test thoroughly.

Wrapping Up

The Page Visibility API might not be as popular as other JavaScript APIs, but it’s a powerful tool for improving performance and user experience. By pausing unnecessary tasks when your app isn’t in use, you’re not just saving resources—you’re building apps that respect your users’ devices and preferences.

If you have any questions or want to share your thoughts, feel free to message me on Twitter at @sprucekhalifa.

Until next time—happy coding! 🎉