import { Component, inject, ApplicationRef } from '@angular/core'; import { SwUpdate, VersionReadyEvent } from '@angular/service-worker'; import { filter, first } from 'rxjs/operators'; import { concat, interval, fromEvent } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], standalone: false, }) export class AppComponent { private swUpdate = inject(SwUpdate); private appRef = inject(ApplicationRef); constructor() { this.setupUpdates(); } private setupUpdates() { if (this.swUpdate.isEnabled) { // 1. Check for updates immediately as soon as the application stabilizes const appIsStable$ = this.appRef.isStable.pipe( first(isStable => isStable === true) ); appIsStable$.subscribe(async () => { console.log('[PWA-Update] App is stable, checking for PWA updates immediately...'); try { await this.swUpdate.checkForUpdate(); } catch (err) { console.warn('[PWA-Update] Failed startup update check:', err); } }); // 2. Check for updates when the app is resumed/focused fromEvent(document, 'visibilitychange') .pipe(filter(() => document.visibilityState === 'visible')) .subscribe(async () => { console.log('[PWA-Update] App resumed, checking for PWA updates...'); try { await this.swUpdate.checkForUpdate(); } catch (err) { console.warn('[PWA-Update] Failed visible resume update check:', err); } }); // 3. Periodic check in background every 5 minutes const everyFiveMinutes$ = interval(5 * 60 * 1000); everyFiveMinutes$.subscribe(async () => { console.log('[PWA-Update] Periodic check for updates...'); try { await this.swUpdate.checkForUpdate(); } catch (err) { console.warn('[PWA-Update] Failed periodic update check:', err); } }); // 4. Activate update and reload when a new version is ready this.swUpdate.versionUpdates .pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')) .subscribe(() => { console.log('[PWA-Update] New version ready! Activating and reloading...'); this.swUpdate.activateUpdate().then(() => { window.location.reload(); }); }); } } }