Service Workers and Offline Support

Service workers cache static assets and API responses, enabling offline visits and faster repeat loads.

Adding PWA Support

ng add @angular/pwa

This command:

1. Installs @angular/service-worker
2. Generates ngsw-config.json (cache configuration)
3. Creates a web app manifest
4. Registers the service worker in app.config.ts
5. Adds manifest link to index.html

Service Worker Configuration

// ngsw-config.json
{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|png|jpg|jpeg|gif|webp)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1d"
      }
    }
  ]
}

Asset Group Modes

Data Group Strategies

Understanding the service worker lifecycle helps you manage updates and caching effectively.

Lifecycle Stages

1. Download — Service worker script downloads
2. Install — Service worker installs and caches assets
3. Activate — Service worker takes control of the page
4. Fetch — Service worker intercepts network requests
5. Update — New service worker version detected

Update Flow

import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="updateAvailable" class="update-banner">
      New version available!
      <button (click)="update()">Update</button>
    </div>
  `,
})
export class AppComponent {
  private swUpdate = inject(SwUpdate);
  updateAvailable = false;

  constructor() {
    this.swUpdate.versionUpdates.subscribe(event => {
      if (event.type === 'VERSION_READY') {
        this.updateAvailable = true;
      }
    });
  }

  update(): void {
    this.swUpdate.activateUpdate().then(() => {
      window.location.reload();
    });
  }
}

Testing Service Workers

Service workers only work in production builds:

# Build for production
ng build --configuration production

# Serve the production build
npx http-server -p 8080 dist/my-app/browser

Offline Verification

1. Load the app in Chrome
2. Open DevTools → Application → Service Workers
3. Check "Offline"
4. Reload the page — it should still work from cache