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
Page Content
hide
Usage
Methods
It’s a very simple class, with only these methods
method | returns | description |
---|---|---|
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
Summary
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