DEV Community

Krixnaas
Krixnaas

Posted on

Active / Offline state of browser tab

<script> 
document.addEventListener("visibilitychange", function() {
      document.title = document.hidden ? "I'm away" : "I'm here";
});
document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
}); 

var siteTitle="";
window.addEventListener('blur', () => {
  siteTitle = document.title;
  document.title = 'Come back! :c';
});
window.addEventListener('focus', () => {
  document.title = siteTitle;
});
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay