The Page Visibility API

The Page Visibility API is useful for removing listeners (or stopping background processes) from hidden tabs or pages.

You only have to register a visibilitychange listener:


document.addEventListener('visibilitychange', _ => { 
    const state = document.visibilityState;
    console.log('document is: ',state);
})    

Hiding the page / making it visible again prints:


document is:  hidden
document is:  visible    

See it in action:

See you at "Build to last" effectively progressive applications with webstandards only -- the "no frameworks, no migrations" approach, at Munich Airport, Terminal 2 or effectiveweb.training (online).


Web Apps, SPA, PWA with vanilla Java Script (ES 6+), CSS 3 and WebStandards only. As simple as possible, but not simpler. See you at: (Progressive) Web apps, Single Page Apps and WebStandards airhacks workshops at MUC airport, Winter Edition

airhacks.fm the podcast:

Stay in touch: airhacks.news.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
Online Workshops
realworldpatterns.com
...the last 150 posts
...the last 10 comments
License