An event for when browser tab becomes active form inactive?

Question

Is there an event I can listen to when a browser tab becomes active. By becoming active I mean all of the following things:

• When user switches to the tab with my website form another tab.
• When user switches back to the browser (with tab that contains my website open) from another App.
• When user unminimizes the browser (with tab that contains my website open)
• Basically when our tab becomes active from any other condition.

Answer 1

You could use the following event for this,

document.addEventListener("visibilitychange", function() {
  console.log(`Your page is  ${document.visibilityState}`);
});

You can check the browser compatibility of the above here.