Search code examples
javascriptalert

Javascript - alert not shown if page is inactive

I need an alert which tells the user that the session expired after one hour.

setTimeout(() => {
  window.alert("Session expired");
  location.reload();
}, 3600000);

This is working perfectly fine if the tab is active, but if it is inactive the alert is not shown and the page will reload without notifying the user. Is there a way to wait for the user to click the "ok" button of the alert when he switches to the page, or something similar that notifies the user?

Thanks

Solution 
  • setTimeout(() => {
  if (document.hidden === false) {
    window.alert("Session expired");
    location.reload();
  }
  else {
    document.addEventListener("visibilitychange", function() {
      if (document.hidden === false) {
        window.alert("Session expired");
        location.reload();
      }
    });
  }
}, 3600000);

    Solved with document.hidden property and visibilitychange listener