RxJS è una delle librerie più importanti, nel mondo JavaScript/TypeScript. Questa libreria consente di gestire flussi di informazioni, o eventi, attraverso una programmazione funzionale. Oltre a sottoscriversi ad azioni proveniennti da un contesto JavaScript, è possibile anche restare in ascolto di feedback provenienti dal DOM come vedremo in questo script dove tratteremo l'evento visibilitychange che viene invocato quando il tab dell'applicazione non è più visibile. La sua gestione ci può tornare utilissima in contesti in cui volessimo interromepere un sistema di polling scandito da un timer o più semplicemente effettuare delle operazioni nel momento in cui il tab tornasse visibile per aggiornare i dati presentati in pagina.

Per creare un'observable che esponga informazioni sulla visibilità del tab è sufficiente utilizzare il metodo fromEvent.

import { of, fromEvent, concat } from 'rxjs'; 
import { map } from 'rxjs/operators';

function visibleChanges(document: Document): Observable<boolean> {
  const visibilityChanges = fromEvent(document, 'visibilitychange');
  return concat(of(null), visibilityChanges).pipe(
    map(() => !document.hidden)
  );
}

La concatenazione con of(null) è necessaria in quanto l'observable inizierà a produrre eventi istantaneamente, in caso omettessimo il concat, il primo evento emesso avverrà solo quando cambieremo tab.

Grazie a quest'observable, possiamo aggiornare i dati nella pagina nel momento in cui viene caricata o il tab viene riattivato.

visibleChanges(document).pipe(
  filter(x=>x)
  //.switchMap()
  //.map()
  //.tap()
).subscribe();

Come detto sopra, possiamo anche fermare un polling quando il tab non è visibile.

combineLatest([timer(0, 1000),visibleChanges(document)]).pipe(
  filter(([_,x])=>x),
  tap(([timer,_])=>console.log(timer))
).subscribe();