← Back to Tutorials Chapter 12

Progressive Web Apps (PWA)

A Progressive Web App (PWA) delivers an app-like experience through the browser. Angular provides first-class support for building PWAs using service workers and manifest files.

What is a PWA?

PWAs are web applications that use modern browser capabilities to provide features traditionally available only to native apps: offline support, push notifications, install prompts, and fast loading. Key characteristics include:

• Progressive — Works for every user, regardless of browser
• Responsive — Fits any form factor (desktop, mobile, tablet)
• Connectivity-independent — Works offline or on low-quality networks
• App-like — Provides a native-app-style interaction
• Fresh — Always up-to-date thanks to service workers
• Safe — Served via HTTPS to prevent snooping
• Installable — Users can add the app to their home screen

Service Workers in Angular

The @angular/service-worker package integrates a service worker into your Angular application. Add it using the Angular CLI.

ng add @angular/pwa

This command sets up the service worker, creates a manifest.webmanifest file, and configures ngsw-config.json.

ServiceWorkerModule

Register the service worker in your application module:

// app.module.ts
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule { }

ngsw-config.json

This configuration file defines how the service worker caches resources and handles data requests.

Asset Groups

Asset groups define which static resources (HTML, CSS, JS, images) to cache and how.

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

Data Groups

Data groups define caching strategies for API calls and other dynamic data.

{
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1d",
        "timeout": "5s",
        "strategy": "performance"
      }
    }
  ]
}

Caching Strategies

Angular's service worker supports several caching strategies:

• Prefetch — Download all resources during installation
• Lazy — Download resources on first request
• Performance — Serve from cache, fall back to network
• Freshness — Try network first, fall back to cache

Install Prompt

Trigger the browser's native install prompt to allow users to add your app to their home screen.

// install-prompt.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class InstallPromptService {
  private deferredPrompt: any;
  isInstallable = false;

  constructor() {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      this.deferredPrompt = e;
      this.isInstallable = true;
    });
  }

  install() {
    this.deferredPrompt?.prompt();
    this.deferredPrompt = null;
    this.isInstallable = false;
  }
}

Offline Support

Once the service worker is active and resources are cached, your application can function without a network connection. Monitor online/offline status with Angular's @HostListener.

@HostListener('window:offline')
onOffline() { this.isOnline = false; }

@HostListener('window:online')
onOnline() { this.isOnline = true; }

PWA Manifest

The manifest.webmanifest file controls how your app appears when installed. It includes the app name, icons, theme color, and display mode.

{
  "name": "Angular PWA",
  "short_name": "AngularPWA",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Lighthouse Audit

Use Google Lighthouse (built into Chrome DevTools) to audit your PWA. It checks for installability, offline support, performance, and best practices. Aim for a score of 90+ on all categories.