JSFiddle - React, Tailwind, and code Playground

by Jeno Laszlo

HTML

<ul id="activityLogger">
</ul>

JavaScript

var startTime = new Date();
var hidden;
var visibilityChange;

function logData(message) {
  console.log(message);
  var ul = document.getElementById("activityLogger");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(message));
  ul.appendChild(li);
}

function handleVisibilityChange(customState) {
  var date = new Date();
  var currentTime = date.getTime();
  var changeTime = date.getTime() - startTime;
  changeTime = Math.round(changeTime / 1000);

  if (customState !== true && customState !== false) {
    customState = document[hidden] ? false : true;
  }

  if (customState) {
    logData('User came back after ' + changeTime + ' seconds');
  } else {
    logData('User exited after browsing for ' + changeTime + ' seconds');
  }

  startTime = currentTime;
}

document.addEventListener("DOMContentLoaded", function(event) {

  if (document.hidden !== undefined) { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (document.mozHidden !== undefined) {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
  } else if (document.msHidden !== undefined) {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (document.webkitHidden !== undefined) {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  } else if (document.oHidden !== undefined) {
    hidden = "oHidden";
    visibilityChange = "ovisibilitychange";
  }

  window.addEventListener('beforeunload', function(event) {
    handleVisibilityChange(false);
  }, false);

  document.addEventListener(visibilityChange, function(event) {
    handleVisibilityChange();
  }, false);
});