JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Page visibility test</h2>
<div id='results'>
</div>

JavaScript

var VISIBLE = 'visible';
	var HIDDEN = 'hidden';

	// Standards:
	if (HIDDEN in document) {
		document.addEventListener("visibilitychange", onchange);
	}
	else if ((HIDDEN = "mozHidden") in document) {
		document.addEventListener("mozvisibilitychange", onchange);
	}
	else if ((HIDDEN = "webkitHidden") in document) {
		document.addEventListener("webkitvisibilitychange", onchange);
	}
	else if ((HIDDEN = "msHidden") in document) {
		document.addEventListener("msvisibilitychange", onchange);
	}
	// IE 9 and lower:
	else if ("onfocusin" in document) {
		document.onfocusin = document.onfocusout = onchange;
	}
	// All others:
	else {
		window.onpageshow = window.onpagehide
		= window.onfocus = window.onblur = onchange;
	}

	function onchange (evt) {
		var isVisible = false;
		var visibility = '';
		var evtMap = {
			focus:VISIBLE, focusin:VISIBLE, pageshow:VISIBLE,
			blur:HIDDEN, focusout:HIDDEN, pagehide:HIDDEN
		};

		evt = evt || window.event;

		if (evt.type in evtMap) {
			visibility = evtMap[evt.type];
		}
		else {
			visibility = this[HIDDEN] ? HIDDEN : VISIBLE;
		}
        
        var results = document.getElementById('results');
		if (visibility == VISIBLE) {
			isVisible = true;
            results.innerHTML = results.innerHTML + 'Visible.<br>';
		} else if (visibility == HIDDEN) {
			isVisible = false;
            results.innerHTML = results.innerHTML + 'Hidden.<br>';
		}
	}

	// set the initial state (but only if browser supports the Page Visibility API)
	if (document[HIDDEN] !== undefined) {
		onchange({type: document[HIDDEN] ? "blur" : "focus"});
	}