8 - Angular + PWA: Creare un\

# Aggiungere PWA al progetto
ng add @angular/pwa

# Cosa viene generato:
# - src/manifest.webmanifest    (Web App Manifest)
# - ngsw-config.json            (configurazione Service Worker)
# - src/assets/icons/           (icone PWA in varie dimensioni)
# - Modifiche a angular.json    (serviceWorker: true)
# - Modifiche a index.html      (link al manifest, meta theme-color)
# - Modifiche a app.config.ts   (ServiceWorkerModule / provideServiceWorker)
    

// app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideServiceWorker } from '@angular/service-worker';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      // Registra il SW dopo la stabilizzazione dell'app
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
};
    

{
  "name": "La Mia App Angular PWA",
  "short_name": "MiaApp",
  "description": "Un'applicazione Angular PWA completa con supporto offline",
  "theme_color": "#58a6ff",
  "background_color": "#0d1117",
  "display": "standalone",
  "orientation": "portrait-primary",
  "scope": "/",
  "start_url": "/",
  "id": "/",
  "categories": ["productivity", "utilities"],
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "screenshots": [
    {
      "src": "assets/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Dashboard principale"
    },
    {
      "src": "assets/screenshots/mobile.png",
      "sizes": "750x1334",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Vista mobile"
    }
  ],
  "shortcuts": [
    {
      "name": "Dashboard",
      "short_name": "Dash",
      "url": "/dashboard",
      "icons": [{ "src": "assets/icons/shortcut-dashboard.png", "sizes": "96x96" }]
    },
    {
      "name": "Impostazioni",
      "short_name": "Settings",
      "url": "/settings",
      "icons": [{ "src": "assets/icons/shortcut-settings.png", "sizes": "96x96" }]
    }
  ]
}
    

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app-shell",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-freshness",
      "urls": ["/api/user/**", "/api/notifications/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 50,
        "maxAge": "1h",
        "timeout": "5s"
      }
    },
    {
      "name": "api-performance",
      "urls": ["/api/articles/**", "/api/products/**"],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "1d"
      }
    }
  ],
  "navigationUrls": [
    "/**",
    "!/__**"
  ]
}
    

// network-status.service.ts
import { Injectable, signal, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class NetworkStatusService {
  private platformId = inject(PLATFORM_ID);

  isOnline = signal(true);
  connectionType = signal<string>('unknown');

  constructor() {
    if (isPlatformBrowser(this.platformId)) {
      this.isOnline.set(navigator.onLine);

      window.addEventListener('online', () => {
        this.isOnline.set(true);
        this.syncPendingData();
      });

      window.addEventListener('offline', () => {
        this.isOnline.set(false);
      });

      // Network Information API (se disponibile)
      const connection = (navigator as any).connection;
      if (connection) {
        this.connectionType.set(connection.effectiveType);
        connection.addEventListener('change', () => {
          this.connectionType.set(connection.effectiveType);
        });
      }
    }
  }

  private async syncPendingData(): Promise<void> {
    // Sincronizza i dati salvati localmente quando torna online
    const pendingActions = await this.getPendingActions();
    for (const action of pendingActions) {
      try {
        await fetch(action.url, action.options);
        await this.removePendingAction(action.id);
      } catch (err) {
        console.error('Sync fallita per:', action.id);
      }
    }
  }

  private async getPendingActions(): Promise<any[]> {
    // Recupera da IndexedDB le azioni in attesa
    return [];
  }

  private async removePendingAction(id: string): Promise<void> {
    // Rimuovi azione completata da IndexedDB
  }
}
    

// offline-storage.service.ts
import { Injectable, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class OfflineStorageService {
  private db: IDBDatabase | null = null;
  private platformId = inject(PLATFORM_ID);
  private readonly DB_NAME = 'pwa-offline-store';
  private readonly DB_VERSION = 1;

  async init(): Promise<void> {
    if (!isPlatformBrowser(this.platformId)) return;

    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);

      request.onupgradeneeded = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
        // Crea object stores per i dati offline
        if (!db.objectStoreNames.contains('articles')) {
          db.createObjectStore('articles', { keyPath: 'id' });
        }
        if (!db.objectStoreNames.contains('pendingActions')) {
          const store = db.createObjectStore('pendingActions', {
            keyPath: 'id', autoIncrement: true
          });
          store.createIndex('timestamp', 'timestamp');
        }
      };

      request.onsuccess = (event) => {
        this.db = (event.target as IDBOpenDBRequest).result;
        resolve();
      };

      request.onerror = () => reject(request.error);
    });
  }

  async save<T>(storeName: string, data: T): Promise<void> {
    if (!this.db) await this.init();
    return new Promise((resolve, reject) => {
      const tx = this.db!.transaction(storeName, 'readwrite');
      tx.objectStore(storeName).put(data);
      tx.oncomplete = () => resolve();
      tx.onerror = () => reject(tx.error);
    });
  }

  async getAll<T>(storeName: string): Promise<T[]> {
    if (!this.db) await this.init();
    return new Promise((resolve, reject) => {
      const tx = this.db!.transaction(storeName, 'readonly');
      const request = tx.objectStore(storeName).getAll();
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
}
    

// push-notification.service.ts
import { Injectable, inject } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class PushNotificationService {
  private swPush = inject(SwPush);
  private http = inject(HttpClient);

  // Chiave pubblica VAPID (generata sul server)
  private readonly VAPID_PUBLIC_KEY = 'BPxGEaVr...tua-chiave-pubblica...';

  async subscribeToNotifications(): Promise<void> {
    try {
      // Richiedi il permesso e ottieni la sottoscrizione
      const subscription = await this.swPush.requestSubscription({
        serverPublicKey: this.VAPID_PUBLIC_KEY
      });

      console.log('Sottoscrizione push:', JSON.stringify(subscription));

      // Invia la sottoscrizione al backend
      await this.http.post('/api/push/subscribe', subscription).toPromise();
    } catch (err) {
      console.error('Errore sottoscrizione push:', err);
    }
  }

  listenForNotifications(): void {
    // Notifiche ricevute mentre l'app e in primo piano
    this.swPush.messages.subscribe((message: any) => {
      console.log('Notifica ricevuta:', message);
      // Aggiorna la UI con i nuovi dati
    });

    // Clic sulla notifica (apre/focalizza l'app)
    this.swPush.notificationClicks.subscribe((event) => {
      console.log('Clic su notifica:', event.action, event.notification);
      // Naviga alla pagina appropriata
      const url = event.notification.data?.url;
      if (url) {
        window.open(url, '_blank');
      }
    });
  }

  async unsubscribe(): Promise<void> {
    try {
      const subscription = await this.swPush.subscription.toPromise();
      if (subscription) {
        await subscription.unsubscribe();
        await this.http.post('/api/push/unsubscribe', {
          endpoint: subscription.endpoint
        }).toPromise();
      }
    } catch (err) {
      console.error('Errore cancellazione sottoscrizione:', err);
    }
  }
}
    

// server/push-server.ts (Node.js con web-push)
import webPush from 'web-push';

// Configurazione VAPID
webPush.setVapidDetails(
  'mailto:info@example.com',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

async function sendNotification(
  subscription: webPush.PushSubscription,
  payload: object
): Promise<void> {
  const notification = {
    notification: {
      title: 'Nuovo articolo disponibile!',
      body: 'Scopri le novità su Angular PWA',
      icon: '/assets/icons/icon-192x192.png',
      badge: '/assets/icons/badge-72x72.png',
      vibrate: [100, 50, 100],
      data: {
        url: '/blog/angular-pwa',
        dateOfArrival: Date.now()
      },
      actions: [
        { action: 'leggi', title: 'Leggi Ora' },
        { action: 'chiudi', title: 'Chiudi' }
      ]
    }
  };

  try {
    await webPush.sendNotification(
      subscription,
      JSON.stringify(notification)
    );
  } catch (error: any) {
    if (error.statusCode === 410) {
      // Sottoscrizione scaduta: rimuovila dal database
      await removeSubscription(subscription.endpoint);
    }
  }
}
    

// app-update.service.ts
import {
  Injectable, inject, ApplicationRef
} from '@angular/core';
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { filter, first, interval, concat } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AppUpdateService {
  private swUpdate = inject(SwUpdate);
  private appRef = inject(ApplicationRef);

  initUpdateCheck(): void {
    if (!this.swUpdate.isEnabled) {
      console.log('Service Worker non abilitato');
      return;
    }

    // Controlla aggiornamenti ogni 6 ore
    const appIsStable$ = this.appRef.isStable.pipe(
      first(stable => stable)
    );
    const every6Hours$ = interval(6 * 60 * 60 * 1000);
    const every6HoursOnceAppStable$ = concat(appIsStable$, every6Hours$);

    every6HoursOnceAppStable$.subscribe(async () => {
      try {
        const updateFound = await this.swUpdate.checkForUpdate();
        console.log(updateFound
          ? 'Nuovo aggiornamento trovato!'
          : 'App già aggiornata');
      } catch (err) {
        console.error('Errore controllo aggiornamento:', err);
      }
    });

    // Ascolta quando una nuova versione e pronta
    this.swUpdate.versionUpdates.pipe(
      filter((event): event is VersionReadyEvent =>
        event.type === 'VERSION_READY'
      )
    ).subscribe(event => {
      console.log('Versione corrente:', event.currentVersion.hash);
      console.log('Nuova versione:', event.latestVersion.hash);
      this.promptUpdate();
    });

    // Gestisci errori irrecuperabili del SW
    this.swUpdate.unrecoverable.subscribe(event => {
      console.error('SW in stato irrecuperabile:', event.reason);
      // Forza il reload completo
      document.location.reload();
    });
  }

  private promptUpdate(): void {
    const shouldUpdate = confirm(
      'Una nuova versione dell\'app è disponibile. ' +
      'Vuoi aggiornare ora?'
    );

    if (shouldUpdate) {
      // Attiva la nuova versione e ricarica
      this.swUpdate.activateUpdate().then(() => {
        document.location.reload();
      });
    }
  }
}
    

// pwa-install.component.ts
import {
  Component, signal, inject, PLATFORM_ID, afterNextRender
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-pwa-install',
  standalone: true,
  template: `
    <div class="install-banner">
      <p>Installa la nostra app per un'esperienza migliore!</p>
      <button (click)="installApp()">Installa</button>
      <button (click)="dismissBanner()">Non ora</button>
    </div>
  `
})
export class PwaInstallComponent {
  private platformId = inject(PLATFORM_ID);

  showInstallBanner = signal(false);
  isAppInstalled = signal(false);

  private deferredPrompt: any = null;

  constructor() {
    afterNextRender(() => {
      this.setupInstallPrompt();
      this.checkIfInstalled();
    });
  }

  private setupInstallPrompt(): void {
    if (!isPlatformBrowser(this.platformId)) return;

    // Intercetta l'evento beforeinstallprompt
    window.addEventListener('beforeinstallprompt', (event: Event) => {
      event.preventDefault();
      this.deferredPrompt = event;
      this.showInstallBanner.set(true);
    });

    // Rileva quando l'app viene installata
    window.addEventListener('appinstalled', () => {
      this.isAppInstalled.set(true);
      this.showInstallBanner.set(false);
      this.deferredPrompt = null;
      console.log('PWA installata con successo!');
    });
  }

  async installApp(): Promise<void> {
    if (!this.deferredPrompt) return;

    // Mostra il prompt di installazione nativo
    this.deferredPrompt.prompt();

    const result = await this.deferredPrompt.userChoice;
    console.log('Scelta utente:', result.outcome);

    if (result.outcome === 'accepted') {
      console.log('Installazione accettata');
    } else {
      console.log('Installazione rifiutata');
    }

    this.deferredPrompt = null;
    this.showInstallBanner.set(false);
  }

  dismissBanner(): void {
    this.showInstallBanner.set(false);
  }

  private checkIfInstalled(): void {
    // Verifica se l'app e già in modalità standalone
    const isStandalone = window.matchMedia(
      '(display-mode: standalone)'
    ).matches;
    this.isAppInstalled.set(isStandalone);
  }
}
    

# 1. Build di produzione
ng build

# 2. Installa un server HTTP statico (una tantum)
npm install -g http-server

# 3. Servi la build di produzione
cd dist/tua-app/browser
http-server -p 8080 -c-1

# Oppure con npx (senza installazione globale)
npx serve dist/tua-app/browser -l 8080

# 4. Apri il browser su http://localhost:8080
# 5. Apri DevTools > Application tab
    

// Nel browser, via DevTools Console:

// 1. Verificare lo stato del service worker
navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => {
    console.log('SW Scope:', reg.scope);
    console.log('SW State:', reg.active?.state);
    console.log('SW Waiting:', reg.waiting);
    console.log('SW Installing:', reg.installing);
  });
});

// 2. Forzare l'aggiornamento del service worker
navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => reg.update());
});

// 3. Deregistrare tutti i service worker (per reset completo)
navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => reg.unregister());
});

// 4. Ispezionare la cache del service worker
caches.keys().then(names => {
  names.forEach(name => {
    caches.open(name).then(cache => {
      cache.keys().then(requests => {
        console.log(`Cache "${name}":`, requests.length, 'entries');
        requests.forEach(req => console.log(' -', req.url));
      });
    });
  });
});

// 5. Simulare stato offline via DevTools
// Network tab > seleziona "Offline" nel dropdown throttling
// Oppure: Application > Service Workers > spunta "Offline"