• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Using The HTML5 Page Visibility API… For fun and profit

HTML5 · January 23, 2015

With HTML5 came a plethora of useful API’s and added methods, one of those which didn’t really get as much visibility (ha, get it?) was the Page Visibility API.

What is the Page Visibility API?

The clue is in the name. It allows you to determine if a page is visible (a tab is focused or window being shown). Historically we haven’t really been able to reliably determine if a visitor is looking at a page and as such, can cause issues when media is being played.

The API is smart enough to work with both tabs and windows. It can accurately tell you if a user is focused and looking at your page. Especially handy if you have two side-by-side windows but focused on another and want to know if you’re site is legitimately and actually being viewed.

When should I use it?

The easiest use-case is when playing audio or video. If a user switches to another tab, you can pause any audio or video that might be currently playing. This not only makes for a better experience for users, it also prevents battery being wasted on devices and saves CPU as well.

There are other non-obvious uses as well. If you have any kind of looping animation (another CPU expense) you can pause or stop the animation when the user isn’t looking (after all, is there a point to a running animation if nobody can see it?).

How to use the Page Visiblity API?

Compared to other features in the HTML5 spec, the Page Visibility API is easy to use. After adding an event listener, it has two methods you can use. You most likely will only be using the method document.hidden which returns true or false if the page is in-view or not. The other method document.visibilityState tells you exactly why it is or is not in view with values; visible, hidden, prerender and unloaded. You can read up on each method value here.

HTML:

Javascript:

Page Visibility API Support

Surprisingly, the Page Visibility API is well supported and mostly free of vendor prefixes (except for Android). It is supported in IE10 and up, and on every modern browser (except Opera Mini, but who cares about Opera Mini anyway?).

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz