feat(pwa): 100% PWABuilder compliance with Service Worker, 512x512 icons, id, scope, and manifest metadata

public/App/Queue/index.html

@@ -434,6 +434,15 @@
                 renderShowcase();
             }
         }, 8000);
+
+        // Register PWA Service Worker
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('/App/Queue/sw.js')
+                    .then(function(reg) { console.log('Queue PWA Service Worker Registered', reg); })
+                    .catch(function(err) { console.log('Service Worker Registration Failed', err); });
+            });
+        }
     </script>
 </body>
 </html>

public/App/Queue/manifest.json

@@ -1,22 +1,59 @@
 {
-  "short_name": "HMS Mobile",
+  "id": "/app/queue",
   "name": "HMS OPD Queue & Token Display PWA",
+  "short_name": "HMS Queue TV",
+  "description": "Live OPD Token Tracker & Patient Calling TV Display Application for E-Atria Multispeciality Hospital.",
+  "lang": "en",
+  "dir": "ltr",
+  "scope": "/app/queue",
+  "start_url": "/app/queue",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "display": "standalone",
+  "display_override": ["standalone", "minimal-ui"],
+  "categories": ["medical", "health", "utilities"],
+  "prefer_related_applications": false,
   "icons": [
     {
-      "src": "/assets/img/logo.png",
+      "src": "/assets/img/pwa-icon-512.png",
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "any maskable"
     },
+    {
+      "src": "/assets/img/pwa-icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
     {
       "src": "/assets/img/apple-touch-icon.png",
       "type": "image/png",
       "sizes": "180x180"
     }
   ],
-  "start_url": "/app/queue",
-  "background_color": "#0f172a",
-  "theme_color": "#0f172a",
-  "display": "standalone",
-  "orientation": "landscape"
+  "shortcuts": [
+    {
+      "name": "Live OPD Queue Display",
+      "short_name": "Queue",
+      "description": "Open live OPD token tracker & callout display screen",
+      "url": "/app/queue",
+      "icons": [
+        {
+          "src": "/assets/img/pwa-icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/assets/img/slides-1.jpg",
+      "sizes": "1280x720",
+      "type": "image/jpeg",
+      "form_factor": "wide",
+      "label": "OPD Token Tracker & Hospital Showcase TV Display"
+    }
+  ]
 }

public/App/Queue/sw.js

@@ -0,0 +1,49 @@
+const CACHE_NAME = 'hms-opd-queue-v1';
+const ASSETS_TO_CACHE = [
+    '/app/queue',
+    '/App/Queue/index.html',
+    '/App/Queue/manifest.json',
+    '/assets/img/logo.png',
+    '/assets/img/pwa-icon-512.png',
+    '/assets/img/pwa-icon-192.png',
+    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
+    'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css'
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(ASSETS_TO_CACHE);
+        })
+    );
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) => {
+            return Promise.all(
+                keys.map((key) => {
+                    if (key !== CACHE_NAME) {
+                        return caches.delete(key);
+                    }
+                })
+            );
+        })
+    );
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+    // API endpoints always fetch fresh network data
+    if (event.request.url.includes('/api/v1/')) {
+        event.respondWith(fetch(event.request));
+        return;
+    }
+
+    event.respondWith(
+        caches.match(event.request).then((cachedResponse) => {
+            return cachedResponse || fetch(event.request);
+        })
+    );
+});