Chapter 14.3☕ 12 min read

PWA — Service Workers & Offline Support

PWA = app jaisa website — install karo, offline bhi chalta hai

01What is PWA

What is a PWA?

Progressive Web App — installable, works offline, fast loading. "PWA = app jaisa website — install bhi kar sakte ho, offline bhi chalta hai"

No app store needed — browser "Add to Home Screen". Examples: Twitter Lite, Starbucks, Pinterest.

02Adding PWA to Angular

Adding PWA to Angular

ng add @angular/pwa

This single command:

Adds @angular/service-worker package
Creates ngsw-config.json (service worker config)
Registers service worker in main.ts
Adds manifest.webmanifest (app name, icons, theme color)
Updates index.html with manifest link and theme color meta tag

"Ek command — PWA setup ho gaya"

03Service Worker Flow

How Service Worker Works

First visit: normal load, service worker installs in background
Second visit: service worker intercepts network requests
Caches static files (JS, CSS, images)
Serves from cache when offline

"Service worker = cache manager — pehle download karo, phir offline bhi chalta hai"

User sees "Add to Home Screen" prompt automatically.

04Cache Config

ngsw-config.json — Cache Configuration

{
  "assetGroups": [{
    "name": "app-shell",
    "installMode": "prefetch",
    "resources": {
      "files": ["/favicon.ico", "/index.html"],
      "versionedFiles": ["/*.js", "/*.css"]
    }
  }],
  "dataGroups": [{
    "name": "api-cache",
    "strategy": "performance",
    "maxSize": 50,
    "timeout": "10s",
    "patterns": ["/api/**"]
  }]
}

"assetGroups = static files, dataGroups = API data"

Cache strategy: freshness (always check network first) vs performance (cache first, fallback to network).

05Offline Best Practices

Offline Experience Best Practices

Show "You're offline" banner using service worker events
Cache critical API responses (dataGroups)
Do NOT cache POST/PUT/DELETE requests
Test: DevTools → Application → Service Workers → Offline checkbox
"Offline bhi kaam karo — user ko pata bhi chalna chahiye ki offline hai"

Limitations: can't cache streaming, WebSockets, very large files.

Key Takeaways

PWA = installable, offline-capable web app
ng add @angular/pwa configures everything in one command
Service worker intercepts requests and serves from cache
ngsw-config.json controls caching strategy (assetGroups vs dataGroups)
Test offline with DevTools Application tab

Previous14.2 — SEO & Meta Tags 📋 All Chapters Next Chapter14.4 — Deploy to Vercel/Netlify/Firebase →