[claude] Add service worker for true offline capability (#212) (#215)

Co-authored-by: Claude (Opus 4.6) <claude@hermes.local>
Co-committed-by: Claude (Opus 4.6) <claude@hermes.local>

app.js

@@ -703,6 +703,14 @@ window.addEventListener('chat-message', (/** @type {CustomEvent} */ event) => {
   }
 });
 
+window.addEventListener('status-update', (/** @type {CustomEvent} */ event) => {
+  console.log('[hermes] Status update:', event.detail);
+});
+
+window.addEventListener('pr-notification', (/** @type {CustomEvent} */ event) => {
+  console.log('[hermes] PR notification:', event.detail);
+});
+
 // === SOVEREIGNTY EASTER EGG ===
 const SOVEREIGNTY_WORD = 'sovereignty';
 let sovereigntyBuffer = '';

index.html

@@ -48,6 +48,11 @@
 
   <div id="sovereignty-msg">⚡ SOVEREIGNTY ⚡</div>
 
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js').catch(() => {});
+    }
+  </script>
   <script type="module" src="app.js"></script>
 <div id="loading" style="position: fixed; top: 0; left: 0; right: 0; height: 4px; background: #222; z-index: 1000;">
   <div id="loading-bar" style="height: 100%; background: var(--color-accent); width: 0;"></div>

sw.js

@@ -0,0 +1,96 @@
+// The Nexus — Service Worker
+// Cache-first for assets, network-first for API calls
+
+const CACHE_NAME = 'nexus-v1';
+const ASSET_CACHE = 'nexus-assets-v1';
+
+const CORE_ASSETS = [
+  '/',
+  '/index.html',
+  '/app.js',
+  '/style.css',
+  '/manifest.json',
+  '/ws-client.js',
+  'https://unpkg.com/three@0.183.0/build/three.module.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/controls/OrbitControls.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/postprocessing/EffectComposer.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/postprocessing/RenderPass.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/postprocessing/UnrealBloomPass.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/postprocessing/ShaderPass.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/shaders/CopyShader.js',
+  'https://unpkg.com/three@0.183.0/examples/jsm/shaders/LuminosityHighPassShader.js',
+];
+
+// Install: precache core assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(ASSET_CACHE).then((cache) => cache.addAll(CORE_ASSETS))
+      .then(() => self.skipWaiting())
+  );
+});
+
+// Activate: clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME && key !== ASSET_CACHE)
+          .map((key) => caches.delete(key))
+      )
+    ).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Network-first for API calls (Gitea / WebSocket upgrades / portals.json live data)
+  if (
+    url.pathname.startsWith('/api/') ||
+    url.hostname.includes('143.198.27.163') ||
+    request.headers.get('Upgrade') === 'websocket'
+  ) {
+    event.respondWith(networkFirst(request));
+    return;
+  }
+
+  // Cache-first for everything else (local assets + CDN)
+  event.respondWith(cacheFirst(request));
+});
+
+async function cacheFirst(request) {
+  const cached = await caches.match(request);
+  if (cached) return cached;
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(ASSET_CACHE);
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    // Offline and not cached — return a minimal fallback for navigation
+    if (request.mode === 'navigate') {
+      const fallback = await caches.match('/index.html');
+      if (fallback) return fallback;
+    }
+    return new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+  }
+}
+
+async function networkFirst(request) {
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(CACHE_NAME);
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    const cached = await caches.match(request);
+    return cached || new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+  }
+}

ws-client.js

@@ -1,9 +1,11 @@
+const HERMES_WS_URL = 'ws://143.198.27.163/api/world/ws';
+
 export class WebSocketClient {
-  constructor(url = 'wss://localhost:8080') {
+  constructor(url = HERMES_WS_URL) {
     this.url = url;
     this.reconnectAttempts = 0;
-    this.maxReconnectAttempts = 5;
-    this.reconnectDelay = 1000;
+    this.maxReconnectAttempts = 10;
+    this.reconnectBaseDelay = 1000;
     this.maxReconnectDelay = 30000;
     this.socket = null;
     this.connected = false;
@@ -12,71 +14,121 @@ export class WebSocketClient {
   }
 
   connect() {
-    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+    if (this.socket && (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING)) {
       return;
     }
 
-    this.socket = new WebSocket(this.url);
+    try {
+      this.socket = new WebSocket(this.url);
+    } catch (err) {
+      console.error('[hermes] WebSocket construction failed:', err);
+      this._scheduleReconnect();
+      return;
+    }
 
     this.socket.onopen = () => {
+      console.log('[hermes] Connected to Hermes gateway');
       this.connected = true;
       this.reconnectAttempts = 0;
-      this.messageQueue.forEach(msg => this.send(msg));
+      this.messageQueue.forEach(msg => this._send(msg));
       this.messageQueue = [];
-      window.dispatchEvent(new CustomEvent('player-joined', { detail: { id: 'system', name: 'System' } }));
+      window.dispatchEvent(new CustomEvent('ws-connected', { detail: { url: this.url } }));
     };
 
     this.socket.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      switch (data.type) {
-        case 'player-joined':
-          window.dispatchEvent(new CustomEvent('player-joined', { detail: data }));
-          break;
-        case 'player-left':
-          window.dispatchEvent(new CustomEvent('player-left', { detail: data }));
-          break;
-        case 'chat-message':
-          window.dispatchEvent(new CustomEvent('chat-message', { detail: data }));
-          break;
+      let data;
+      try {
+        data = JSON.parse(event.data);
+      } catch (err) {
+        console.warn('[hermes] Unparseable message:', event.data);
+        return;
       }
+      this._route(data);
     };
 
-    this.socket.onclose = () => {
+    this.socket.onclose = (event) => {
       this.connected = false;
-      this.reconnect();
+      this.socket = null;
+      console.warn(`[hermes] Connection closed (code=${event.code})`);
+      window.dispatchEvent(new CustomEvent('ws-disconnected', { detail: { code: event.code } }));
+      this._scheduleReconnect();
     };
 
-    this.socket.onerror = (error) => {
-      console.error('WebSocket error:', error);
+    this.socket.onerror = () => {
+      // onclose fires after onerror; logging here would be redundant noise
+      console.warn('[hermes] WebSocket error — waiting for close event');
     };
   }
 
-  reconnect() {
+  _route(data) {
+    switch (data.type) {
+      case 'chat':
+      case 'chat-message':
+        window.dispatchEvent(new CustomEvent('chat-message', { detail: data }));
+        break;
+
+      case 'status-update':
+        window.dispatchEvent(new CustomEvent('status-update', { detail: data }));
+        break;
+
+      case 'pr-notification':
+        window.dispatchEvent(new CustomEvent('pr-notification', { detail: data }));
+        break;
+
+      case 'player-joined':
+        window.dispatchEvent(new CustomEvent('player-joined', { detail: data }));
+        break;
+
+      case 'player-left':
+        window.dispatchEvent(new CustomEvent('player-left', { detail: data }));
+        break;
+
+      default:
+        console.debug('[hermes] Unhandled message type:', data.type, data);
+    }
+  }
+
+  _scheduleReconnect() {
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.warn('Max reconnection attempts reached.');
+      console.warn('[hermes] Max reconnection attempts reached — giving up');
+      window.dispatchEvent(new CustomEvent('ws-failed'));
       return;
     }
 
+    const delay = Math.min(
+      this.reconnectBaseDelay * Math.pow(2, this.reconnectAttempts),
+      this.maxReconnectDelay
+    );
+    console.log(`[hermes] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`);
     this.reconnectTimeout = setTimeout(() => {
       this.reconnectAttempts++;
       this.connect();
-    }, Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay));
+    }, delay);
+  }
+
+  _send(message) {
+    this.socket.send(JSON.stringify(message));
   }
 
   send(message) {
-    if (this.connected) {
-      this.socket.send(JSON.stringify(message));
+    if (this.connected && this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this._send(message);
     } else {
       this.messageQueue.push(message);
     }
   }
 
   disconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    this.maxReconnectAttempts = 0; // prevent auto-reconnect after intentional disconnect
     if (this.socket) {
       this.socket.close();
+      this.socket = null;
     }
   }
 }
 
-// Initialize and export a singleton instance
 export const wsClient = new WebSocketClient();