8 - Angular + PWA: Building an Installable App

# Add PWA to the project
ng add @angular/pwa

# What gets generated:
# - src/manifest.webmanifest    (Web App Manifest)
# - ngsw-config.json            (Service Worker configuration)
# - src/assets/icons/           (PWA icons in various sizes)
# - Changes to angular.json     (serviceWorker: true)
# - Changes to index.html       (link to manifest, meta theme-color)
# - Changes to 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(),
      // Register SW after app stabilization
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
};
    

{
  "name": "My Angular PWA App",
  "short_name": "MyApp",
  "description": "A complete Angular PWA application with offline support",
  "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": "Main dashboard"
    },
    {
      "src": "assets/screenshots/mobile.png",
      "sizes": "750x1334",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Mobile view"
    }
  ],
  "shortcuts": [
    {
      "name": "Dashboard",
      "short_name": "Dash",
      "url": "/dashboard",
      "icons": [{ "src": "assets/icons/shortcut-dashboard.png", "sizes": "96x96" }]
    },
    {
      "name": "Settings",
      "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 (if available)
      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> {
    // Sync locally saved data when back 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 failed for:', action.id);
      }
    }
  }

  private async getPendingActions(): Promise<any[]> {
    // Retrieve pending actions from IndexedDB
    return [];
  }

  private async removePendingAction(id: string): Promise<void> {
    // Remove completed action from 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;
        // Create object stores for offline data
        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);

  // VAPID public key (generated on server)
  private readonly VAPID_PUBLIC_KEY = 'BPxGEaVr...your-public-key...';

  async subscribeToNotifications(): Promise<void> {
    try {
      // Request permission and obtain subscription
      const subscription = await this.swPush.requestSubscription({
        serverPublicKey: this.VAPID_PUBLIC_KEY
      });

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

      // Send subscription to backend
      await this.http.post('/api/push/subscribe', subscription).toPromise();
    } catch (err) {
      console.error('Push subscription error:', err);
    }
  }

  listenForNotifications(): void {
    // Notifications received while app is in foreground
    this.swPush.messages.subscribe((message: any) => {
      console.log('Notification received:', message);
      // Update the UI with new data
    });

    // Click on notification (opens/focuses the app)
    this.swPush.notificationClicks.subscribe((event) => {
      console.log('Notification click:', event.action, event.notification);
      // Navigate to the appropriate page
      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('Unsubscribe error:', err);
    }
  }
}
    

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

// VAPID configuration
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: 'New article available!',
      body: 'Discover the latest on 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: 'read', title: 'Read Now' },
        { action: 'close', title: 'Close' }
      ]
    }
  };

  try {
    await webPush.sendNotification(
      subscription,
      JSON.stringify(notification)
    );
  } catch (error: any) {
    if (error.statusCode === 410) {
      // Subscription expired: remove it from 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 not enabled');
      return;
    }

    // Check for updates every 6 hours
    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
          ? 'New update found!'
          : 'App is already up to date');
      } catch (err) {
        console.error('Update check error:', err);
      }
    });

    // Listen for when a new version is ready
    this.swUpdate.versionUpdates.pipe(
      filter((event): event is VersionReadyEvent =>
        event.type === 'VERSION_READY'
      )
    ).subscribe(event => {
      console.log('Current version:', event.currentVersion.hash);
      console.log('New version:', event.latestVersion.hash);
      this.promptUpdate();
    });

    // Handle unrecoverable SW errors
    this.swUpdate.unrecoverable.subscribe(event => {
      console.error('SW in unrecoverable state:', event.reason);
      // Force a full reload
      document.location.reload();
    });
  }

  private promptUpdate(): void {
    const shouldUpdate = confirm(
      'A new version of the app is available. ' +
      'Would you like to update now?'
    );

    if (shouldUpdate) {
      // Activate new version and reload
      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>Install our app for a better experience!</p>
      <button (click)="installApp()">Install</button>
      <button (click)="dismissBanner()">Not now</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;

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

    // Detect when the app is installed
    window.addEventListener('appinstalled', () => {
      this.isAppInstalled.set(true);
      this.showInstallBanner.set(false);
      this.deferredPrompt = null;
      console.log('PWA installed successfully!');
    });
  }

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

    // Show the native install prompt
    this.deferredPrompt.prompt();

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

    if (result.outcome === 'accepted') {
      console.log('Installation accepted');
    } else {
      console.log('Installation dismissed');
    }

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

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

  private checkIfInstalled(): void {
    // Check if app is already in standalone mode
    const isStandalone = window.matchMedia(
      '(display-mode: standalone)'
    ).matches;
    this.isAppInstalled.set(isStandalone);
  }
}
    

# 1. Production build
ng build

# 2. Install a static HTTP server (one time)
npm install -g http-server

# 3. Serve the production build
cd dist/your-app/browser
http-server -p 8080 -c-1

# Or with npx (no global install)
npx serve dist/your-app/browser -l 8080

# 4. Open browser at http://localhost:8080
# 5. Open DevTools > Application tab
    

// In the browser, via DevTools Console:

// 1. Check service worker status
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. Force service worker update
navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => reg.update());
});

// 3. Unregister all service workers (for full reset)
navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => reg.unregister());
});

// 4. Inspect service worker cache
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. Simulate offline state via DevTools
// Network tab > select "Offline" in throttling dropdown
// Or: Application > Service Workers > check "Offline"