Detect whether the application is currently displayed on the front or background using the browser mechanism for such, Progressive Web App.

About this component

• Easy to use
• Actions to detect feature and use it
• Works in both Reactive Web apps and Mobile apps

About Foreground Detection

With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.

Notes: The Page Visibility API is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.

For more information:

• https://whatwebcando.today/foreground-detection.html
• https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
• https://w3c.github.io/page-visibility/