feat: add PWA manifest and service worker for Add to Home Screen support

Author: mohitgauniyal

client/index.html

@@ -5,6 +5,8 @@
   <title>Instbyte</title>
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-dynamic.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-dynamic.png">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" id="themeColorMeta" content="#111827">
   <meta name="viewport" content="width=device-width,initial-scale=1">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
@@ -89,7 +91,11 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="/js/app.js?v=1.9.1.2"></script>
 
-
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js').catch(() => { });
+    }
+  </script>
 </body>
 
 </html>

client/js/app.js

@@ -116,6 +116,9 @@ async function applyBranding() {
         root.style.setProperty("--color-secondary-light", p.secondaryLight);
         root.style.setProperty("--color-on-secondary", p.onSecondary);
 
+        const themeMeta = document.getElementById('themeColorMeta');
+        if (themeMeta) themeMeta.setAttribute('content', p.primary);
+
     } catch (e) {
         // Branding failed — default styles remain, no crash
     }

client/sw.js

@@ -0,0 +1,10 @@
+// sw.js — Instbyte service worker
+// Minimal install-only service worker.
+// We do not cache anything — Instbyte is a real-time LAN tool and must
+// always fetch live data. This file exists solely to satisfy the PWA
+// installability requirement.
+
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
+
+// No fetch handler — all requests go straight to the network as normal.

server/server.js

@@ -772,6 +772,37 @@ app.get("/branding", (req, res) => {
   });
 });
 
+/* PWA MANIFEST */
+app.get("/manifest.json", (req, res) => {
+  const b = config.branding;
+  const name = b.appName || "Instbyte";
+  const color = b.primaryColor || "#111827";
+
+  res.json({
+    name,
+    short_name: name.length > 12 ? name.slice(0, 12) : name,
+    description: "Real-time LAN sharing — no cloud, no accounts",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#f3f4f6",
+    theme_color: color,
+    icons: [
+      {
+        src: "/logo-dynamic.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "any maskable"
+      },
+      {
+        src: "/logo-dynamic.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any maskable"
+      }
+    ]
+  });
+});
+
 /* HEALTH MONITOR */
 app.get("/health", (req, res) => {
   res.json({