Angular Pwa

Name: Angular Pwa
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

182 installs
6 repo stars
Updated April 4, 2026
oguzhan18/angular-ecosystem-skills

Enable service workers, app manifests, offline caching strategies, and install prompts so Angular apps behave like installable mobile-friendly PWAs with reliable offline shells.

About

Guides Angular Progressive Web App setup with service workers, asset caching strategies, web manifests, installability, and update flows using @angular/pwa and ngsw configuration for resilient client apps.

@angular/pwa schematic setup
ngsw-config caching strategies
Web app manifest and icons
Update notifications and versioning
Offline-first navigation shells

Angular Pwa by the numbers

182 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #889 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-pwa

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oguzhan18/angular-ecosystem-skills/angular-pwa.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-pwa)

Installs	182
repo stars	★ 6
Last updated	April 4, 2026
Repository	oguzhan18/angular-ecosystem-skills ↗

What it does

Enable service workers, app manifests, offline caching strategies, and install prompts so Angular apps behave like installable mobile-friendly PWAs with reliable offline shells.

Files

SKILL.mdMarkdownGitHub ↗

@angular/pwa

Version: Angular 21 (2025) Tags: PWA, Service Worker, Offline, Web App Manifest

References: PWA Guide • ngsw-config

API Changes

This section documents recent version-specific API changes.

NEW: Angular Service Worker v2 — Improved caching strategies

NEW: esbuild PWA support — Faster builds

NEW: @angular/build:application — Modern PWA building

Best Practices

Add PWA to project

ng add @angular/pwa

Configure ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.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|cur|jpg|jpeg|png)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-freshness",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s"
      }
    }
  ]
}

Use network-first for API calls

{
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 50,
        "maxAge": "1h"
      }
    }
  ]
}

Use cache-first for static assets

{
  "assetGroups": [
    {
      "name": "static",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/*.js", "/*.css"]
      }
    }
  ]
}

Handle offline state

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

constructor(private swPush: SwPush) {}

subscribeToNotifications() {
  if (this.swPush.isEnabled) {
    this.swPush.requestSubscription({
      serverPublicKey: 'VAPID_PUBLIC_KEY'
    });
  }
}

Check service worker updates

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

constructor(private updates: SwUpdate) {
  this.updates.versionUpdates.subscribe(event => {
    if (event.type === 'VERSION_READY') {
      // Reload to get new version
      window.location.reload();
    }
  });
}

Customize manifest

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