Skip to main content
The Angular PWA Demo implements Progressive Web App features using Angular’s Service Worker module, providing native app-like experiences in the browser.

​
Service worker configuration

The application uses Angular’s Service Worker for comprehensive PWA support:
app.module.ts:103-106
ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: !isDevMode(),
  registrationStrategy: 'registerWhenStable:30000'
})
The service worker is disabled in development mode and registers 30 seconds after the app becomes stable in production, ensuring optimal performance.

​
Caching strategy

The service worker configuration defines two asset groups with different caching strategies:

​
Prefetch strategy

Critical application files are prefetched immediately on installation:
ngsw-config.json:4-16
{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": [
      "/favicon.ico",
      "/index.html",
      "/manifest.webmanifest",
      "/*.css",
      "/*.js"
    ]
  }
}
Install mode: prefetch
  • Downloads all specified resources during service worker installation
  • Ensures instant availability even on first offline visit
  • Ideal for critical app shell resources
The app shell includes the HTML, CSS, JavaScript bundles, and web manifest - everything needed for the app to start.

​
Web app manifest

The manifest defines how the app appears when installed:
manifest.webmanifest
{
  "name": "AngularDijkstra",
  "short_name": "AngularDijkstra",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

​
Manifest properties explained

Display mode

standalone: App runs in its own window without browser UI, providing a native app experience

Theme color

#1976d2: Material Design blue, applied to browser UI elements and splash screen

Icons

8 sizes: From 72x72 to 512x512 pixels for different devices and contexts

Purpose

maskable any: Icons work with adaptive icon masks and fallback to any shape

​
Offline functionality

The service worker enables the app to work offline through intelligent caching:
1

Initial visit

On the first visit, the service worker installs and prefetches the app shell (HTML, CSS, JS).
2

Asset caching

As users navigate, assets like images and fonts are cached lazily on first request.
3

Offline access

When offline, all previously cached resources are served from the cache, allowing full app functionality.
4

Background sync

When connection is restored, the service worker checks for updates and prefetches new versions.
The service worker only activates in production builds (ng build). Development mode (ng serve) bypasses the service worker for easier debugging.

​
Installation experience

Users can install the PWA to their device:

​
Desktop installation

  1. Browser shows an install button in the address bar
  2. Clicking installs the app to the operating system
  3. App appears in the application menu/dock
  4. Opens in standalone window without browser chrome

​
Mobile installation

  1. Browser prompts “Add to Home Screen”
  2. App icon appears on home screen
  3. Launches fullscreen like a native app
  4. Splash screen uses theme and background colors
Installation is optional - the app works perfectly in the browser. Installation provides a more integrated experience.

​
Registration strategy

The service worker uses a stability-based registration: 
registrationStrategy: 'registerWhenStable:30000'
This means:
  • Service worker registration waits until the app is stable
  • If not stable after 30 seconds, registers anyway
  • Prevents registration from interfering with initial load
  • Optimizes First Contentful Paint (FCP) and Time to Interactive (TTI)

​
PWA best practices implemented

  • App shell architecture with prefetched critical resources
  • Lazy loading for non-critical assets
  • Optimized bundle sizes with code splitting
  • Service worker caches all visited pages
  • Static assets cached on first use
  • App shell always available offline
  • Standalone display mode
  • Custom splash screen
  • Theme color integration
  • No browser UI when installed
  • Works without service worker in older browsers
  • Graceful degradation for unsupported features
  • Service worker optional, not required

​
Testing PWA features

To test PWA functionality: 
# Build the app for production
ng build

# Serve the production build
cd dist/angular-dijkstra
python -m http.server 8080
Chrome DevTools Application tab shows service worker status, cached resources, and manifest information for debugging.

​
Next steps

Routing system

Understand the application routing configuration

Service architecture

Learn about the service layer pattern

Installation

Set up your development environment

Architecture overview

Review the overall architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us