feat: Update app to be installable PWA

app/index.html

@@ -7,10 +7,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <link rel="icon" type="image/svg+xml" href="/vite-logo.svg" />
-  <link rel="apple-touch-icon" href="/vite-logo.png" />
+  <link rel="apple-touch-icon" href="/pwa-icon.svg" />
+  <link rel="manifest" href="/manifest.webmanifest" />
+  <meta name="theme-color" content="#0f172a" />
+  <meta name="application-name" content="Echo Sphere" />
 
   <title>Echo Sphere</title>
-  <meta name="description" content="Echo Sphere" />
+  <meta
+    name="description"
+    content="Install the Echo Sphere PWA to explore the demo offline and across devices."
+  />
   <!-- <meta name="author" content="" /> -->
 
   <meta property="og:title" content="Echo Sphere" />

app/public/manifest.webmanifest

@@ -0,0 +1,17 @@
+{
+  "name": "Echo Sphere",
+  "short_name": "EchoSphere",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "description": "Explore the Echo Sphere demo application even when you are offline.",
+  "icons": [
+    {
+      "src": "/pwa-icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

app/public/sw.js

@@ -0,0 +1,99 @@
+const CACHE_NAME = 'webframework-cache-v1'
+const OFFLINE_URL = '/'
+
+// Assets to cache on install
+const STATIC_ASSETS = [
+	'/',
+	'/static/app/index.html',
+	'/static/app/manifest.webmanifest',
+	'/static/app/pwa-icon.svg',
+	'/static/app/vite-logo.svg',
+]
+
+self.addEventListener('install', (event) => {
+	event.waitUntil(
+		caches
+			.open(CACHE_NAME)
+			.then((cache) => {
+				// Cache static assets
+				return cache.addAll(STATIC_ASSETS.map((url) => new Request(url, { cache: 'reload' })))
+			})
+			.catch(() => {})
+			.then(() => self.skipWaiting())
+	)
+})
+
+self.addEventListener('activate', (event) => {
+	event.waitUntil(
+		caches
+			.keys()
+			.then((keys) =>
+				Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))
+			)
+			.then(() => self.clients.claim())
+	)
+})
+
+self.addEventListener('fetch', (event) => {
+	const { request } = event
+
+	if (request.method !== 'GET' || request.url.startsWith('chrome-extension')) {
+		return
+	}
+
+	const requestURL = new URL(request.url)
+
+	if (requestURL.origin !== self.location.origin) {
+		return
+	}
+
+	event.respondWith(
+		caches.open(CACHE_NAME).then(async (cache) => {
+			try {
+				const response = await fetch(request)
+				if (
+					response &&
+					response.status === 200 &&
+					response.type === 'basic' &&
+					!request.url.includes('/__vite_ping') &&
+					!request.url.includes('/api/') // Don't cache API responses
+				) {
+					cache.put(request, response.clone()).catch(() => {})
+				}
+				return response
+			} catch (error) {
+				// Try to serve from cache
+				const cachedResponse = await cache.match(request)
+				if (cachedResponse) {
+					return cachedResponse
+				}
+
+				// For navigation requests, serve the offline page
+				if (request.mode === 'navigate') {
+					const offlineResponse =
+						(await cache.match('/static/app/index.html')) || (await cache.match(OFFLINE_URL))
+					if (offlineResponse) {
+						return offlineResponse
+					}
+				}
+
+				// For API requests, return a proper offline response
+				if (request.url.includes('/api/')) {
+					return new Response(
+						JSON.stringify({
+							error: 'Offline',
+							message: 'This feature is not available offline',
+						}),
+						{
+							status: 503,
+							statusText: 'Service Unavailable',
+							headers: { 'Content-Type': 'application/json' },
+						}
+					)
+				}
+
+				throw error
+			}
+		})
+	)
+})

app/src/main.tsx

@@ -1,5 +1,8 @@
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import { registerServiceWorker } from './service-worker-registration.ts'
 
 // biome-ignore lint/style/noNonNullAssertion: expect root element to exist
 createRoot(document.getElementById('root')!).render(<App />)
+
+registerServiceWorker()

app/src/service-worker-registration.ts

@@ -0,0 +1,36 @@
+export function registerServiceWorker(): void {
+	if (!import.meta.env.PROD) {
+		return
+	}
+
+	if (!('serviceWorker' in navigator)) {
+		return
+	}
+
+	const register = () => {
+		// Use the correct path based on environment
+		const swPath = import.meta.env.PROD ? '/static/app/sw.js' : '/sw.js'
+
+		navigator.serviceWorker.register(swPath).catch((error) => {
+			console.error('Service worker registration failed:', error)
+		})
+	}
+
+	if (document.readyState === 'complete') {
+		register()
+	} else {
+		window.addEventListener('load', register, { once: true })
+	}
+}
+
+export function unregisterServiceWorker(): void {
+	if (!('serviceWorker' in navigator)) {
+		return
+	}
+
+	navigator.serviceWorker.ready
+		.then((registration) => registration.unregister())
+		.catch(() => {
+			// Swallow errors silently to avoid crashing the app when service worker cannot be unregistered.
+		})
+}

server/apps/website/templates/website/index.html

@@ -10,8 +10,11 @@
   <link rel="icon" type="image/svg+xml" href="{% static 'vite-logo.svg' %}" />
   <link rel="apple-touch-icon" href="{% static 'vite-logo.png' %}" />
   {% else %}
-  <link rel="icon" type="image/svg+xml" href="/vite-logo.svg" />
-  <link rel="apple-touch-icon" href="/vite-logo.png" />
+  <link rel="icon" type="image/svg+xml" href="/static/app/vite-logo.svg" />
+  <link rel="apple-touch-icon" href="/static/app/pwa-icon.svg" />
+  <link rel="manifest" href="/static/app/manifest.webmanifest" />
+  <meta name="theme-color" content="#0f172a" />
+  <meta name="application-name" content="Echo Sphere" />
   {% endif %}
 
   <title>Echo Sphere</title>
@@ -94,4 +97,4 @@
 
 </body>
 
-</html>
+</html>