Hacer que Api llame cada 5 minutos en la aplicación Angular para ese intervalo utilizado (10000 * 30). Subscirbe. Ahora desea pausar la suscripción cuando la pestaña del navegador esté inactiva y reanudarla cuando esté activa.
Intenté debajo del código pero no funcionó cuando la ventana del navegador de 2 veces estaba inactiva. Api llamó después de cada 5 minutos con el siguiente código y funciona bien
Se utiliza Angular 12 y Rxjs lib.
const sourceInterval = interval(1000 * 30); this.subscription = sourceInterval.subscribe(val => { //api call to get notification }); @HostListener('document:visibilitychange', ['$event']) visibilitychange() { if (document.hidden){ this.subscription.unsubscribe(); } else { // here i want make api call again tired below code to make api call again but not worked as expected const sourceInterval = interval(1000 * 30); this.subscription = sourceInterval.subscribe(val => { //api call to get notification }); } }No es necesario que sea tan complejo, todo lo que necesita es filter :
import { interval, filter } from 'rxjs'; let count = 0; interval(1000) .pipe(filter(() => !document.hidden)) .subscribe(() => console.log('API called', count++));Pruébelo aquí: https://stackblitz.com/edit/rxjs-6mdzvf?file=index.ts
Creo que la respuesta de @MoxxiManagarm podría funcionar y no es tan compleja.
Personalmente lo logré pero sin RxJs
import { Component, HostListener, OnDestroy } from "@angular/core"; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.scss'] }) export class MyComponent implements OnDestroy { public interval: any; constructor(private httpClient: HttpClient) { this.startMakingApiCalls(); } @HostListener('document:visibilitychange', ['$event']) public visibilitychange($event: any): void { if (document.hidden) { window.clearInterval(this.interval); } else { this.startMakingApiCalls(); } } private startMakingApiCalls(): void { this.interval = window.setInterval(() => { console.log('MAKE API CALL'); }, 3000); } ngOnDestroy(): void { window.clearInterval(this.interval); } }