feat: add PWA support for home screen installation (#12)

Add manifest.json, service worker, and app icons.
Users can now install TermBeam to their home screen
for instant access without typing URLs.

Closes #9

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

public/icons/icon-192.png

@@ -9,6 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#1e1e1e" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>TermBeam</title>
     <style>
       :root {
@@ -941,6 +943,10 @@ <h3>
 
       loadSessions();
       setInterval(loadSessions, 3000);
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {});
+      }
     </script>
   </body>
 </html>

public/icons/icon-512.png

@@ -0,0 +1,14 @@
+{
+  "name": "TermBeam",
+  "short_name": "TermBeam",
+  "description": "Beam your terminal to any device",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1e1e1e",
+  "theme_color": "#1e1e1e",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ]
+}

public/icons/icon.svg

@@ -0,0 +1,54 @@
+const CACHE_NAME = 'termbeam-v1';
+const SHELL_URLS = ['/', '/terminal'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // Don't cache WebSocket upgrades or external resources
+  if (
+    event.request.mode === 'websocket' ||
+    url.protocol === 'ws:' ||
+    url.protocol === 'wss:' ||
+    url.origin !== self.location.origin
+  ) {
+    return;
+  }
+
+  // Network-first for API calls
+  if (url.pathname.startsWith('/api/')) {
+    event.respondWith(
+      fetch(event.request).catch(() => caches.match(event.request))
+    );
+    return;
+  }
+
+  // Cache-first for static assets
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      if (cached) return cached;
+      return fetch(event.request).then((response) => {
+        if (response.ok) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        }
+        return response;
+      });
+    })
+  );
+});

public/index.html

@@ -9,6 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#1e1e1e" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>TermBeam — Terminal</title>
     <link
       rel="stylesheet"
@@ -801,6 +803,10 @@
 
         connect();
       }
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {});
+      }
     </script>
   </body>
 </html>

public/manifest.json

@@ -1,11 +1,15 @@
 const path = require('path');
 const os = require('os');
 const fs = require('fs');
+const express = require('express');
 const { detectShells } = require('./shells');
 
 const PUBLIC_DIR = path.join(__dirname, '..', 'public');
 
 function setupRoutes(app, { auth, sessions, config }) {
+  // Serve static files (manifest.json, sw.js, icons, etc.)
+  app.use(express.static(PUBLIC_DIR, { index: false }));
+
   // Login page
   app.get('/login', (_req, res) => {
     if (!auth.password) return res.redirect('/');