adro.codes

Posted on Jun 22, 2019 • Updated on Jan 9, 2022 • Originally published at adro.codes

Change your document title when a user changes tabs

#javascript #tutorial #webdev #beginners

Let's Get Started

First things first, we are going to need a project base. For this, I am going to use create-react-app. However, the code can be used in any JavaScript project. We'll just need access to the document object.

The code for this project is available on Github

Step 1: Initialise

npx create-react-app please-dont-leave
cd please-dont-leave
npm start || yarn start

Step 2: Find file

Open your App.js file.

Step 3: Magic

Create a function above the App function called getBrowserHiddenProps. This function will get the correct properties for us to use based on the browser we are on.

const getBrowserHiddenProps = () => {
  let hidden, visibilityChange
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }

  return {
    hidden,
    visibilityChange
  }
}

We are returning an object containing the hidden and visibilityChange values using a shorthand method. By not defining the keys of the object, the keys will default to the variable name. Below would achieve the same effect as above.

return {
  hidden: hidden,
  visibilityChange: visibilityChange
}

Pretty cool right? Anyway, Onwards!

The next step is to add an event listener to the document to check if the page visibility has changed. We'll do this within the App function.

const { hidden, visibilityChange } = getBrowserHiddenProps()

if (typeof document.addEventListener !== "undefined" && typeof hidden !== "undefined") {
  // We can continue
}

Here we have another reason to return the hidden and visibilityChange as an object. This was so we can deconstruct the return value of the getBrowserHiddenProps function. We're also checking to make sure that we are able to add an event listener to the document object and to ensure the hidden value is not undefined.

Next, we need to add the event listener based on the visibility event (visibilityChange).

const { hidden, visibilityChange } = getBrowserHiddenProps()

if (typeof document.addEventListener !== "undefined" && typeof hidden !== "undefined") {
  // We can continue
  document.addEventListener(visibilityChange, () => {

  }, false)
}

Finally, we can check the hidden value and act of it. In our case, we'll be asking the user to come back because we miss their attention.

const { hidden, visibilityChange } = getBrowserHiddenProps()

if (typeof document.addEventListener !== "undefined" && typeof hidden !== "undefined") {
  // We can continue
  document.addEventListener(visibilityChange, () => {
    if (document[hidden]) {
      document.title = "😭 PLEASE COME BACK!!"
    } else {
      document.title = "😍 YAY!"
    }
  }, false)
}

And there you have it! Watch your document title change as you change tabs. Success

Step 4: Possiblities

Now, changing the tab title may not be that useful, however, there are a few things that you could do when a user moves to another tab. One of the most useful reasons to do this would be to send a Google Analytics Event. This will allow you to start seeing when users are leaving your page and if they return. Very cool.

A lot of this code was leverage from the Page Visibility API page on MDN. I'd recommend checking out the page to learn more about this if you are interested.

Thank you for reading my article, it really means a lot! ❤️ Please provide any feedback or comments, I'm always looking to improve and having meaningful discussions.