Progressive Web Apps (PWA)

User visits page    ↓Browser requests index.html from server    ↓Browser parses HTML, requests main.js, styles.css, assets    ↓All requests go to the network — if network is unavailable, app fails    ↓User must reload when a new version is deployed to see updates

User visits page (first time)    ↓Browser registers ngsw-worker.js (the Angular service worker)    ↓SW downloads and caches all prefetch assets (app shell)    ↓Future visits: SW intercepts requests    ├─ App shell (JS, CSS, HTML): served from cache — near-instant    └─ API requests: served per the configured strategy         ├─ performance strategy: cache-first, background update         └─ freshness strategy: network-first, fall back to cache
User is offline    ↓SW serves everything from cache — app still works    ↓Network request to API fails: app shows cached data or graceful error
New version deployed    ↓On next page load, SW fetches ngsw.json and compares hashes    ↓Changed hashes → SW downloads new bundles in background    ↓SwUpdate.versionUpdates emits VersionReadyEvent    ↓App prompts user: "Update available — click to reload"    ↓User confirms → activateUpdate() + window.location.reload()

ng add @angular/pwa

// Generated by ng add @angular/pwaimport { provideServiceWorker } from '@angular/service-worker';import { isDevMode } from '@angular/core';
export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    provideServiceWorker('ngsw-worker.js', {      enabled: !isDevMode(),               // disabled during ng serve      registrationStrategy: 'registerWhenStable:30000'      // Register when the app is stable, or after 30 seconds — whichever comes first    }),  ],};

// NgModule approach (Angular 2–13)@NgModule({  imports: [    ServiceWorkerModule.register('ngsw-worker.js', {      enabled: !isDevMode(),      registrationStrategy: 'registerWhenStable:30000',    }),  ],})export class AppModule {}

ng build && npx http-server dist/my-app/browser -p 8080 -c-1

{  "assetGroups": [    {      "name": "app",      "installMode": "prefetch",      "updateMode": "prefetch",      "resources": {        "files": [          "/favicon.ico",          "/index.html",          "/manifest.webmanifest",          "/*.css",          "/*.js"        ]      }    },    {      "name": "assets",      "installMode": "lazy",      "updateMode": "lazy",      "resources": {        "files": [          "/assets/**",          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"        ]      }    }  ]}

{  "dataGroups": [    {      "name": "api-performance",      "urls": ["/api/products/**", "/api/categories"],      "cacheConfig": {        "strategy": "performance",        "maxSize": 100,        "maxAge": "1h",        "timeout": "3s"      }    },    {      "name": "api-freshness",      "urls": ["/api/user/**", "/api/cart"],      "cacheConfig": {        "strategy": "freshness",        "maxSize": 20,        "maxAge": "5m",        "timeout": "3s"      }    }  ]}

import { Component, inject, signal } from '@angular/core';import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';import { filter } from 'rxjs';import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({  selector: 'app-root',  standalone: true,  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 = signal(false);
  constructor() {    if (!this.swUpdate.isEnabled) return;  // graceful degradation
    // versionUpdates is the modern API (versionUpdates replaced available/activated)    this.swUpdate.versionUpdates.pipe(      filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),      takeUntilDestroyed()    ).subscribe(() => {      this.updateAvailable.set(true);    });
    // Handle the rare case where the service worker enters an unrecoverable state    this.swUpdate.unrecoverable.pipe(      takeUntilDestroyed()    ).subscribe(() => {      window.location.reload();    });  }
  async applyUpdate(): Promise<void> {    await this.swUpdate.activateUpdate();    window.location.reload();  }}

constructor() {  if (!this.swUpdate.isEnabled) return;
  // Check for updates every 6 hours in long-running sessions  interval(6 * 60 * 60 * 1000).pipe(    takeUntilDestroyed()  ).subscribe(() => {    this.swUpdate.checkForUpdate().catch(() => {      // Silently ignore — user may be offline    });  });}

# ❌ Service worker disabled — PWA features don't workng serve
# ✅ Production build + static server — service worker activeng build --configuration=productionnpx http-server dist/my-app/browser -c-1

// ❌ Deprecated — shows warning in v22this.swUpdate.available.subscribe(() => this.updateAvailable = true);
// ✅ Current API — versionUpdates with type guardthis.swUpdate.versionUpdates.pipe(  filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')).subscribe(() => this.updateAvailable.set(true));

// ❌ Throws if service workers unsupportedthis.swUpdate.checkForUpdate();
// ✅ Guard with isEnabled firstif (this.swUpdate.isEnabled) {  this.swUpdate.checkForUpdate();}

{  "name": "user-data",  "urls": ["/api/user/**", "/api/account/**"],  "cacheConfig": {    "strategy": "freshness",   // ✅ network-first for user data    "maxAge": "1m",    "maxSize": 10  }}