Testing my server code to disconnect inactive websocket clients, I learned a behavior I hadn't known before: when a browser tab is no longer the foreground tab, the page's scripts continue running. This made sense in hindsight, because we need those scripts to run for certain features. Most web mail clients display the number of unread messages in their tab title, and if a new piece of mail arrived, that number couldn't be updated unless scripts were allowed to run.

In my scenario, I wanted the opposite. If someone has put my Sawppy rover control page in the background, they are no longer driving and should vacate the position for another. I started looking for HTML DOM events that I could subscribe to and learn if my tab is no longer the foreground, but a few experiments with the "onblur" event didn't function as I hoped they would. As a fallback I decided to take advantage of a side effect: modern browsers do keep running scripts for background tabs, but they do so at a much slower rate. I "just" have to shorten the timeout interval and that would disconnect clients running slowly just as it does for those who have lost network connection or stopped. This is fragile as it depends on unspecified browser behavior, but good enough for today.

When testing this, I noticed another problem: for the user, it's not very evident when the server has disconnected from their control client. I have a little bit of text at the bottom saying "Disconnected" but when I'm testing and juggling multiple browsers I started wishing for something more visually obvious. I thought about blanking out the page completely but such a drastic change might be too disorienting for the user. For the best user experience I want an obvious sign but I don't want to club them over the head with it! I decided to change the color of the touchpad to grayscale in the websocket.onclose handler. The user can see they're still on the page they expected, but they can also clearly see something is different. This accomplishes my goal.

From an accessibility perspective, this isn't great for color-blind users. It'll be fine for certain types of color blindness like red-green color blindness, but not for fully color blind users because it's all gray to them. Thus I do not see this behavior as replacement for the "Disconnect" text. That text still needs to be there for those who could not see the change in color. And knowing connected/disconnected status will become more important as the little rover wanders away from my home, away from the powerful standalone wireless access point, and have to become its own wireless access point.

[Code for this project is publicly available on GitHub.]