Page Visibility API example

Made for article at http://www.kutac.cz/blog/weby-a-vse-okolo/mene-zname-webove-api-1/

HTML

<h4>Zkuste minimalizovat okno, nebo přepnout záložku.</h4>
<div id="output"><b>Výstup</b></div>

Babel + JSX

const output = document.querySelector('#output')
const printOut = (s) => output.innerHTML += `<br>${s}`

// Je stránka skrytá ?
printOut(document.hidden ? 'Stránka je skrytá' : 'Stránka je viditelná')

// Event při změně viditelnosti
document.addEventListener('visibilitychange', () => {
  // visibilityState je buď 'visible', 'hidden' nebo 'prerender'
  const isVisible = document.visibilityState === 'visible'
  printOut(isVisible ? 'Je mě vidět' : 'Není mě vidět')
  
  printOut(`document.hidden = ${document.hidden}`)
})