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.


const tabVisibility = new TabVisibility()
Create an instance


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.
window.onload =  () => {

  // initialize everything and register all the components
  // render vue
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    store: Store.vxStore
  // start polling

   * there's some action that could be taken when the tab becomes visible
  Store.handleVisibility(new TabVisibility())

main app with tab visibility handling
And the handler it references
  ns.handleVisibility = (tabVisibility) => {
    // if the tab goes out of focus, we want to pause everything
      .onHidden(()=>ns.vxStore.dispatch('pause', true))
      .onVisible(()=>ns.vxStore.dispatch('pause', false))
Tab visibility handler


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