ng add @angular/pwa

{
  "name": "My Angular PWA",
  "short_name": "MyPWA",
  "description": "An awesome Angular Progressive Web App",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "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"
    }
  ],
  "shortcuts": [
    {
      "name": "Dashboard",
      "url": "/dashboard",
      "icons": [{ "src": "assets/icons/icon-96x96.png", "sizes": "96x96" }]
    }
  ]
}

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "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/live-data"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "3d",
        "timeout": "10s"
      }
    },
    {
      "name": "api-performance",
      "urls": ["/api/static-data"],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "1d"
      }
    }
  ],
  "navigationUrls": [
    "/**",
    "!/**/*.*",
    "!/**/*__*",
    "!/**/*__*/**"
  ]
}

// app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideServiceWorker } from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),           // Only active in production
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

import { Component, inject } from '@angular/core';
import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
import { filter } from 'rxjs/operators';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    @if (updateAvailable) {
      <div class="update-banner">
        A new version is available!
        <button (click)="applyUpdate()">Update Now</button>
      </div>
    }
    <router-outlet />
  `,
})
export class AppComponent {
  private swUpdate = inject(SwUpdate);
  updateAvailable = false;

  constructor() {
    if (this.swUpdate.isEnabled) {
      // Listen for available updates
      this.swUpdate.versionUpdates
        .pipe(filter((event): event is VersionReadyEvent =>
          event.type === 'VERSION_READY'
        ))
        .subscribe(() => {
          this.updateAvailable = true;
        });

      // Check for updates periodically (every 6 hours)
      setInterval(() => {
        this.swUpdate.checkForUpdate();
      }, 6 * 60 * 60 * 1000);
    }
  }

  async applyUpdate() {
    await this.swUpdate.activateUpdate();
    document.location.reload();
  }
}

import { Component, inject } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { HttpClient } from '@angular/common/http';

@Component({
  standalone: true,
  selector: 'app-notifications',
  template: `<button (click)="subscribeToNotifications()">Enable Notifications</button>`,
})
export class NotificationsComponent {
  private swPush = inject(SwPush);
  private http = inject(HttpClient);

  // Your VAPID public key from the push notification server
  readonly VAPID_PUBLIC_KEY = 'YOUR_PUBLIC_VAPID_KEY';

  async subscribeToNotifications() {
    try {
      const subscription = await this.swPush.requestSubscription({
        serverPublicKey: this.VAPID_PUBLIC_KEY,
      });

      // Send subscription to your backend
      this.http.post('/api/push-subscriptions', subscription).subscribe();
    } catch (err) {
      console.error('Could not subscribe to notifications', err);
    }
  }

  constructor() {
    // Handle incoming push notifications
    this.swPush.messages.subscribe((message: any) => {
      console.log('Push message received:', message);
    });

    // Handle notification click actions
    this.swPush.notificationClicks.subscribe(({ action, notification }) => {
      if (action === 'open') {
        window.open(notification.data.url);
      }
    });
  }
}

// Custom service worker extension (ngsw-worker.js supplements)
// In a custom sw.js file that you merge with ngsw-worker.js

self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(syncPendingMessages());
  }
});

async function syncPendingMessages() {
  const pending = await getPendingFromIndexedDB();
  for (const item of pending) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item),
    });
    await removeFromIndexedDB(item.id);
  }
}

# Build production bundle
ng build

# Serve with a static server (required for SW to work)
npx http-server dist/my-app/browser -p 8080

# Deploy to Firebase Hosting
npm install -g firebase-tools
firebase login
firebase init hosting
ng build
firebase deploy