Progressive Web App

`ng add @angular/pwa` wires up a service worker, a web manifest, and a default icon set — installable and offline-capable in one command.

4 min read Level 2/5 #angular#pwa#service-worker

What you'll learn

Add PWA support with a single ng add command
Edit ngsw-config.json to control caching
Prompt users to refresh when a new version ships

A PWA is just a web app with a service worker and a manifest. Angular’s schematic handles the boilerplate.

Add It

ng add @angular/pwa

That generates ngsw-config.json, manifest.webmanifest, a default icon set, and registers a service worker in app.config.ts via provideServiceWorker.

ngsw-config.json

The Angular service worker is config-driven — you describe what to cache and how, and it generates the right Cache API calls.

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": { "files": ["/index.html", "/*.css", "/*.js"] }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1h",
        "strategy": "freshness"
      }
    }
  ]
}

assetGroups cache the app shell. dataGroups cache API responses with a strategy of freshness (network-first) or performance (cache-first).

Update Prompt

The SW only activates once the user reloads. Use SwUpdate to nudge them.

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

@Component({ selector: 'app-root', standalone: true, template: `` })
export class AppComponent {
  private updates = inject(SwUpdate);

  constructor() {
    this.updates.versionUpdates.subscribe(evt => {
      if (evt.type === 'VERSION_READY' && confirm('Update available — reload?')) {
        location.reload();
      }
    });
  }
}

Test locally with ng build && npx http-server dist/my-app/browser — ng serve does not run the service worker.

Build & Optimization →