Add initlal service-worker with basic offline handling. Manifest is not yet present.

src/routes/+error.svelte

@@ -29,7 +29,7 @@
 		</div>
 	{/if}
 
-	{#if $page.error?.owlCode === 'NETWORK_DISCONNECTED'}
+	{#if page.error?.owlCode === 'NETWORK_DISCONNECTED'}
 		<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
 	{:else}
 		<Button href={'/'} color={'accent'}>Return to Home</Button>

src/routes/+layout.svelte

@@ -2,9 +2,9 @@
 	import { page } from '$app/state';
 	import { slide, fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 	import { navigating } from '$app/state';
 	import { LOCATIONS } from '$lib/locations-object.svelte';
-	import { nearestStationsState } from '$lib/geohash.svelte';
 
 	import Loading from '$lib/components/ui/Loading.svelte';
 	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
@@ -17,7 +17,19 @@
 
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
-	onMount(() => LOCATIONS.init());
+	onMount(async () => {
+		LOCATIONS.init();
+		if (browser && 'serviceWorker' in navigator) {
+			try {
+				const registration = await navigator.serviceWorker.register('/service-worker.js', {
+					type: 'module',
+				});
+				console.info('OwlBoard Service Worker registered', registration.scope);
+			} catch (error) {
+				console.error('Service Worker installation failed: ', error)
+			}
+		}
+	});
 
 	let { children } = $props();
 

src/service-worker.ts

@@ -0,0 +1,76 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference lib="webworker" />
+
+import type { ApiEnvelope } from '@owlboard/api-schema-types';
+import { build, files, version } from '$service-worker';
+
+const sw = self as unknown as ServiceWorkerGlobalScope;
+const CACHE_NAME = `owlboard-cache-${version}`;
+const ASSETS = [...build, ...files, '/'];
+
+sw.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
+    );
+});
+
+sw.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) => {
+            return Promise.all(
+                keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
+            );
+        })
+    );
+});
+
+sw.addEventListener('fetch', (event) => {
+    const { request } = event;
+    if (request.method !== 'GET') return;
+    
+    const url = new URL(request.url);
+
+    // 1. Static Assets (Cache-First)
+    if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) {
+        event.respondWith(
+            caches.match(request).then((res) => res || fetch(request))
+        );
+        return;
+    }
+
+    // 2. Offline API Fallback (Network-First)
+    if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
+        event.respondWith(
+            fetch(request).catch(() => {
+                const errorObject: ApiEnvelope.Envelope = {
+                    e: {
+                        code: "NETWORK_DISCONNECTED",
+                        msg: "Cannot connect to the OwlBoard server"
+                    },
+                    t: Math.floor(Date.now() / 1000)
+                };
+                return new Response(
+                    JSON.stringify(errorObject),
+                    {
+                        status: 503,
+                        headers: { 'Content-Type': 'application/json' }
+                    }
+                );
+            })
+        );
+        return;
+    }
+
+    // 3. Navigation Fallback (The Offline 404 Catch-All)
+    // This catches top-level page navigations and hard refreshes
+    if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
+        event.respondWith(
+            fetch(request).catch(() => {
+                // The network request failed entirely (offline).
+                // Serve the cached root shell so SvelteKit can boot.
+                return caches.match('/') as Promise<Response>;
+            })
+        );
+        return;
+    }
+});