JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<h1>Page Visibility API Demo</h1>
<p>
  This page demonstrates how the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API">Page Visbility API works.</a>
</p>
<p>
  When there is a visibility API event (i.e. document becomes visible or becomes hidden) then a new item is added to the list of events.
</p>
<p>
  Of particular interest is what happens when the screen saver or device lock screen activates.
</p>
<ol id="state"></ol>

JavaScript

var el = document.getElementById('state');

function handleVisibilityChange() {
	const state = document.hidden ? 'hidden' : 'visible';
  
  el.innerHTML += ['<li>', state, ' @ ' ,new Date(), '</li>'].join('');
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

handleVisibilityChange();