Kuber includes full Progressive Web App (PWA) support via Angular Service Worker, enabling offline capability, fast loading, and installable app experience. This guide covers PWA configuration, production builds, and deployment options.

info PWA Overview

---

Kuber is configured as a Progressive Web App with the following capabilities:

• Installable: Users can install Kuber as a standalone app on their device via the browser's install prompt.
• Offline Support: The service worker caches app shell and assets for offline access.
• Fast Loading: Prefetched critical resources ensure instant loading on repeat visits.
• Background Sync: Service worker updates in the background when the app is stable.

settings PWA Configuration Files

---

1. Web App Manifest (src/manifest.webmanifest)

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "name": "Kuber - HR & Company Management",
  "short_name": "Kuber",
  "description": "Angular 21+ HR & Company Management Admin Template",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.svg",
      "sizes": "192x192",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    },
    {
      "src": "assets/icons/icon-512x512.svg",
      "sizes": "512x512",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    }
  ]
}

The manifest defines how the app appears when installed. Customize the name, short_name, theme_color, and icons to match your brand.

2. Service Worker Config (ngsw-config.json)

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**/*",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "1h"
      }
    }
  ]
}

• app group: Critical app shell files are prefetched during installation for instant loading.
• assets group: Media and font files are loaded lazily to save bandwidth, then prefetched on update.
• dataGroups: API responses are cached with a performance-first strategy (up to 100 entries, 1 hour max age).

3. Service Worker Registration (src/main.ts)

if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
  const isDev = typeof ngDevMode !== 'undefined' && ngDevMode;
  if (!isDev) {
    navigator.serviceWorker.register('/ngsw-worker.js').catch((err) => {
      console.warn('[PWA] Service worker registration failed:', err);
    });
  }
}

The service worker is registered manually in main.ts. It is only enabled in production mode (detected via ngDevMode), ensuring it does not interfere with hot-module replacement during development.

4. Angular Build Configuration (angular.json)

"options": {
  "outputPath": { "base": "dist/main" },
  "serviceWorker": "ngsw-config.json",
  ...
},
"configurations": {
  "production": {
    "budgets": [
      { "type": "initial", "maximumWarning": "4mb", "maximumError": "6mb" },
      { "type": "anyComponentStyle", "maximumWarning": "30kb", "maximumError": "50kb" }
    ]
  }
}

The serviceWorker option points to ngsw-config.json. The production configuration applies budget checks for bundle size optimization.

build Production Build

---

Build the application for production deployment using the built-in script:

cd main
npm run build

Or specify the production configuration explicitly:

ng build --configuration production

For multi-variant builds (light, dark, RTL, etc.), use the custom build script:

node build.js

The production build:

• Generates output in dist/main/
• Enables output hashing for cache busting
• Generates the ngsw-worker.js service worker
• Applies budget checks (initial: 4MB warning / 6MB error)
• Optimizes and minifies all assets
• Enables AOT compilation for faster rendering

cloud Deployment Options

---

settings_suggest Environment Configuration

---

Kuber uses Angular environment files for configuration:

// src/environments/environment.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://localhost:4200'
};

// src/environments/environment.development.ts (Development)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:4200'
};

speed Build Optimization Tips

---

• Lazy-Loaded Routes: All feature modules use lazy loading — only the code for the current route is downloaded.
• OnPush Change Detection: All components use ChangeDetectionStrategy.OnPush to reduce unnecessary change detection cycles.
• Standalone Components: No NgModules overhead — components are tree-shakeable and imported directly via routes.
• Hash Routing: Hash-based URLs (/#/admin/dashboard) simplify server configuration and avoid 404 errors on page refresh.
• Service Worker Caching: App shell is cached for instant subsequent loads.
• Skeleton Loading: Master tables use skeleton loaders to improve perceived performance during data fetching.

assessment Performance Budgets

---

Defined in angular.json:

"budgets": [
  { "type": "initial", "maximumWarning": "4mb", "maximumError": "6mb" },
  { "type": "anyComponentStyle", "maximumWarning": "30kb", "maximumError": "50kb" }
]

Adjust these budgets based on your deployment requirements. The initial bundle is larger due to the comprehensive feature set including multiple chart libraries (ECharts, ApexCharts, Chart.js, Ngx-Charts) and Angular Material.

check_circle Testing PWA Locally

---

To test PWA features locally, build and serve the production version:

cd main
ng build --configuration production
npx http-server dist/main -p 4200 -o

Then open Chrome DevTools > Application > Service Workers to verify registration, or use Lighthouse > PWA audit to validate compliance.