Cliniva 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

---

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

• Installable: Users can install Cliniva 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)

{
  "name": "Cliniva Hospital Management System",
  "short_name": "Cliniva",
  "theme_color": "#6777ef",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    { "src": "assets/images/logo.png", "sizes": "192x192", "type": "image/png" },
    { "src": "assets/images/logo.png", "sizes": "512x512", "type": "image/png" }
  ]
}

The manifest defines how the app appears when installed. Customize the name, theme_color, icons to match your hospital branding.

2. Service Worker Config (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.csr.html", "/index.html",
          "/manifest.webmanifest", "/*.css", "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"]
      }
    }
  ]
}

• 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.

3. Service Worker Registration (app.config.ts)

provideServiceWorker('ngsw-worker.js', {
  enabled: !isDevMode(),
  registrationStrategy: 'registerWhenStable:30000',
})

The service worker is enabled only in production mode. It registers after the app has been stable for 30 seconds, ensuring background updates don't impact initial load.

build Production Build

---

Build the application for production deployment using Angular CLI:

cd main
npm run build

Or specify the production configuration explicitly:

ng build --configuration production

The production build:

• Generates output in dist/cliniva/
• 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

---

Cliniva 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

---

• Tree-shaken Icons: Cliniva imports only 75+ Feather icons explicitly rather than the full set, saving ~140KB from the bundle.
• Lazy-Loaded Routes: All feature modules use lazy loading — only the code for the current route is downloaded.
• Zoneless Change Detection: Reduces overhead by eliminating zone.js patches.
• Standalone Components: No NgModules overhead — components are tree-shakeable.
• 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.

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 and Angular Material.

check_circle Testing PWA Locally

---

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

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

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