YASSERRMD · YASSERRMD · May 19, 2026 · May 19, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,10 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#f39c12" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icon-192.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>Sunpath</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js')
+      }
+    </script>
   </body>
 </html>
diff --git a/frontend/public/icon-192.svg b/frontend/public/icon-192.svg
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "Sunpath — Solar Exposure Analyser",
+  "short_name": "Sunpath",
+  "description": "Analyse solar exposure and shadows for any point on Earth.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1a2e",
+  "theme_color": "#f39c12",
+  "icons": [
+    {
+      "src": "/icon-192.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/icon-192.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}
diff --git a/frontend/public/sw.js b/frontend/public/sw.js
@@ -0,0 +1,40 @@
+const CACHE = 'sunpath-v1'
+
+const PRECACHE_URLS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+]
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(PRECACHE_URLS))
+  )
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((names) =>
+      Promise.all(names.filter((n) => n !== CACHE).map((n) => caches.delete(n)))
+    )
+  )
+})
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.url.includes('/api/')) {
+    return
+  }
+
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      const fetched = fetch(event.request).then((response) => {
+        if (response.ok && response.type === 'basic') {
+          const copy = response.clone()
+          caches.open(CACHE).then((cache) => cache.put(event.request, copy))
+        }
+        return response
+      }).catch(() => cached)
+      return cached || fetched
+    })
+  )
+})
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import EmbedPanel from './components/EmbedPanel'
 import ProjectsPanel from './components/ProjectsPanel'
 import ComparisonPanel from './components/ComparisonPanel'
 import TimeSlider from './components/TimeSlider'
+import InstallPrompt from './components/InstallPrompt'
 import SunIndicator from './components/SunIndicator'
 import { fetchHorizon, fetchBuildings, fetchGrid } from './lib/api'
 import type { GridCell, HorizonProfile } from './lib/api'
@@ -225,6 +226,7 @@ function App() {
             {summary}
           </div>
         )}
+        <InstallPrompt />
       </div>
     )
   }
@@ -417,6 +419,7 @@ function App() {
         <EmbedPanel />
         <AboutPanel />
       </div>
+      <InstallPrompt />
     </div>
   )
 }

diff --git a/frontend/src/components/InstallPrompt.tsx b/frontend/src/components/InstallPrompt.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react'
+
+export default function InstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState<Event | null>(null)
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      e.preventDefault()
+      setDeferredPrompt(e)
+      setShow(true)
+    }
+    window.addEventListener('beforeinstallprompt', handler)
+    return () => window.removeEventListener('beforeinstallprompt', handler)
+  }, [])
+
+  const install = () => {
+    if (!deferredPrompt) return
+    ;(deferredPrompt as any).prompt()
+    ;(deferredPrompt as any).userChoice.then(() => {
+      setDeferredPrompt(null)
+      setShow(false)
+    })
+  }
+
+  if (!show) return null
+
+  return (
+    <div style={{ position: 'fixed', bottom: 16, left: 16, right: 16, zIndex: 1000, maxWidth: 400, margin: '0 auto' }}>
+      <div style={{ background: '#fff', border: '1px solid #ddd', borderRadius: 12, padding: '12px 16px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: 12 }}>
+        <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4 }}>
+          Install <strong>Sunpath</strong> for offline access
+        </div>
+        <button onClick={install} style={{ background: '#2ecc71', color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
+          Install
+        </button>
+        <button onClick={() => setShow(false)} style={{ background: 'none', border: 'none', color: '#999', cursor: 'pointer', fontSize: 18, lineHeight: 1, padding: 4 }}>
+          &times;
+        </button>
+      </div>
+    </div>
+  )
+}