perf: ottimizzato il controllo degli aggiornamenti PWA all'avvio e al ripristino dell'app
- Implementato il controllo immediato non appena l'applicazione Angular si stabilizza (isStable). - Aggiunto il controllo reattivo al cambio di visibilità (document visibilityState === visible) quando la PWA viene riportata in primo piano/focalizzata. - Mantendo il controllo periodico in background ogni 5 minuti.
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { Component, inject, ApplicationRef } from '@angular/core';
|
import { Component, inject, ApplicationRef } from '@angular/core';
|
||||||
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
|
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
|
||||||
import { filter, first } from 'rxjs/operators';
|
import { filter, first } from 'rxjs/operators';
|
||||||
import { concat, interval } from 'rxjs';
|
import { concat, interval, fromEvent } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
@@ -19,14 +19,44 @@ export class AppComponent {
|
|||||||
|
|
||||||
private setupUpdates() {
|
private setupUpdates() {
|
||||||
if (this.swUpdate.isEnabled) {
|
if (this.swUpdate.isEnabled) {
|
||||||
// Controlla aggiornamenti ogni 5 minuti invece di 30
|
// 1. Check for updates immediately as soon as the application stabilizes
|
||||||
const everyFiveMinutes$ = interval(5 * 60 * 1000);
|
const appIsStable$ = this.appRef.isStable.pipe(
|
||||||
|
first(isStable => isStable === true)
|
||||||
|
);
|
||||||
|
|
||||||
everyFiveMinutes$.subscribe(() => {
|
appIsStable$.subscribe(async () => {
|
||||||
console.log('Checking for PWA updates...');
|
console.log('[PWA-Update] App is stable, checking for PWA updates immediately...');
|
||||||
this.swUpdate.checkForUpdate();
|
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
|
this.swUpdate.versionUpdates
|
||||||
.pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'))
|
.pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'))
|
||||||
.subscribe(() => {
|
.subscribe(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user