When a browser tab goes in and out of view, it’s possible you want to do something differently. If you’re writing Apps Script add-ons this is especially true.
TabVisibility is a class to allow the detection and testing of visibility across multiple browsers, and to react when their visibility changes.
Here is the github repo for TabVisibility
It’s a very simple class, with only these methods
|isVisible()||Boolean||whether the tab is currently visible|
|onVisible(action: function)||What to do when the tab becomes visible|
|onHidden(action: function)||What to do when the tab becomes hidden|
Example for Sheets Add-ons
The background of this example is that Apps Script add-on wants to stop polling a spreadsheet for updates when the sheets app is not in view. The mechanics of this are quite unimportant, but TabVisibility is used to provoke a change of polling state in the the Vuex store which is behind the add-on.
The entire main app simply looks like this, with a reference to a function to handle tab visibility.
And the handler it references
Tab visibility is included in How to use Vue.js, Vuex and Vuetify to create Google Apps Script Add-ons and plays an important role in pausing spreadsheet and timers when the add-on is no longer in view.
And there’s nothing really more to say, except a reminder that here is the repo for TabVisibility