jaydenkalu · jaydenkalu · Jun 29, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,9 +7,20 @@
     <meta name="description" content="On-chain governance and voting on Stellar Soroban" />
     <!-- Content Security Policy (CSP): production-ready policy. For dev (Vite HMR), see docs/frontend-csp.md -->
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; script-src 'self' 'strict-dynamic' https:; connect-src 'self' https:; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https:; font-src 'self' data:;">
+    <link rel="manifest" href="/manifest.json" />
   </head>
   <body>
+    <div id="install-banner" style="display:none;position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#1e293b;color:#e2e8f0;padding:.75rem 1.25rem;border-radius:.5rem;font-family:system-ui,sans-serif;font-size:.9rem;z-index:9999;display:none;gap:.75rem;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.4);">
+      <span>Install CosmosVote for quick access</span>
+      <button id="install-btn" style="background:#4A90E2;color:#fff;border:none;border-radius:.375rem;padding:.4rem .9rem;cursor:pointer;font-size:.875rem;">Install</button>
+      <button id="install-dismiss" style="background:transparent;color:#94a3b8;border:none;cursor:pointer;font-size:1.1rem;line-height:1;" aria-label="Dismiss">✕</button>
+    </div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
+      }
+    </script>
   </body>
 </html>
diff --git a/frontend/manifest.json b/frontend/manifest.json
@@ -2,16 +2,51 @@
   "name": "CosmosVote",
   "short_name": "CosmosVote",
   "description": "On-chain governance and voting app for Stellar Soroban",
-  "start_url": ".",
+  "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#4A90E2",
+  "categories": ["finance", "productivity", "utilities"],
   "icons": [
     {
       "src": "/favicon.svg",
       "sizes": "any",
       "type": "image/svg+xml",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshots/desktop.png",
+      "sizes": "1280x800",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "CosmosVote proposal list"
+    },
+    {
+      "src": "/screenshots/mobile.png",
+      "sizes": "390x844",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "CosmosVote on mobile"
     }
   ]
 }
diff --git a/frontend/public/offline.html b/frontend/public/offline.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CosmosVote — Offline</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      body {
+        font-family: system-ui, sans-serif;
+        background: #0f172a;
+        color: #e2e8f0;
+        min-height: 100dvh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 1.5rem;
+      }
+      .card {
+        max-width: 400px;
+        background: #1e293b;
+        border-radius: 1rem;
+        padding: 2.5rem 2rem;
+        box-shadow: 0 4px 24px rgba(0,0,0,.4);
+      }
+      .icon { font-size: 3rem; margin-bottom: 1rem; }
+      h1 { font-size: 1.5rem; color: #4A90E2; margin-bottom: .5rem; }
+      p { color: #94a3b8; font-size: .95rem; line-height: 1.5; margin-bottom: 1.5rem; }
+      button {
+        background: #4A90E2;
+        color: #fff;
+        border: none;
+        border-radius: .5rem;
+        padding: .6rem 1.4rem;
+        font-size: 1rem;
+        cursor: pointer;
+      }
+      button:hover { background: #3a7bc8; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="icon">📡</div>
+      <h1>CosmosVote</h1>
+      <p>You're offline. Check your connection and try again.</p>
+      <button onclick="location.reload()">Retry</button>
+    </div>
+  </body>
+</html>
diff --git a/frontend/public/sw.js b/frontend/public/sw.js
@@ -0,0 +1,40 @@
+const CACHE = 'cosmosvote-v1';
+const APP_SHELL = ['/', '/index.html', '/offline.html', '/manifest.json', '/favicon.svg'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(APP_SHELL))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET') return;
+
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        const clone = response.clone();
+        caches.open(CACHE).then((cache) => cache.put(event.request, clone));
+        return response;
+      })
+      .catch(() =>
+        caches.match(event.request).then(
+          (cached) =>
+            cached ||
+            (event.request.mode === 'navigate'
+              ? caches.match('/offline.html')
+              : new Response('', { status: 503 }))
+        )
+      )
+  );
+});
diff --git a/frontend/src/usePWAInstall.ts b/frontend/src/usePWAInstall.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>;
+  readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+export function usePWAInstall(): { canInstall: boolean; install: () => void } {
+  const [canInstall, setCanInstall] = useState(false);
+  const promptRef = useRef<BeforeInstallPromptEvent | null>(null);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      e.preventDefault();
+      promptRef.current = e as BeforeInstallPromptEvent;
+      setCanInstall(true);
+    };
+    window.addEventListener('beforeinstallprompt', handler);
+    return () => window.removeEventListener('beforeinstallprompt', handler);
+  }, []);
+
+  const install = () => {
+    if (!promptRef.current) return;
+    promptRef.current.prompt();
+    promptRef.current.userChoice.then(() => {
+      promptRef.current = null;
+      setCanInstall(false);
+    });
+  };
+
+  return { canInstall, install };
+}