v6.5.0

changelog.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 2025-12-04 - 6.5.0 - feat(serviceworker)
+Add server-driven service worker cache invalidation and TypedSocket integration
+
+- TypedServer: push cache invalidation messages to service worker clients (tagged 'serviceworker') before notifying frontend clients on reload
+- Service Worker: connect to TypedServer via TypedSocket; handle 'serviceworker_cacheInvalidate' typed request to clean caches and trigger client reloads
+- Web inject: add fallback to clear caches via the Cache API when global service worker helper is not available
+- Interfaces: add IRequest_Serviceworker_CacheInvalidate typedrequest interface
+- Plugins: export typedsocket in web_serviceworker plugin surface
+- Service worker connection: retry logic and improved logging for TypedSocket connection attempts
+
+## 2025-12-04 - 6.4.0 - feat(serviceworker)
+Add speedtest support to service worker and dashboard
+
+- Add serviceworker_speedtest typed request handler to measure download, upload and latency
+- Expose dashboard speedtest endpoint (/sw-dash/speedtest) and integrate runSpeedtest flow
+- Dashboard UI: add speedtest panel, run button, visual speed bars and online indicator
+- Metrics: introduce ISpeedtestMetrics and methods (recordSpeedtest, setOnlineStatus, getSpeedtestMetrics) and include speedtest data in metrics output
+- Server/tools: add typedrequest handling for speedtest in sw-typedrequest and route service worker dashboard path in CacheManager
+
+## 2025-12-04 - 6.3.0 - feat(web_serviceworker)
+Add advanced service worker subsystems: cache deduplication, metrics, update & network managers, event bus and dashboard
+
+- CacheManager: request deduplication for concurrent fetches, safer caching (preserve CORS headers), periodic in-flight cleanup and full cache cleaning API
+- Fetch handling: improved handling for same-origin vs cross-origin requests, more robust 500 debug responses when upstream fetch fails
+- UpdateManager: rate-limited update checks, offline grace period, debounced update and cache revalidation tasks, forceUpdate logic and persisted version/cache timestamps
+- NetworkManager: online/offline detection, retry/backoff, request timeouts and more resilient makeRequest implementation
+- EventBus: singleton pub/sub with history, once/onMany/onAll helpers and convenience emitters for cache/network/update events
+- MetricsCollector: comprehensive metrics for cache, network, updates and connections with helper methods and JSON/HTML dashboard endpoints (/sw-dash, /sw-dash/metrics)
+- ErrorHandler & ServiceWorkerError: structured error types, severity, context, history and helper APIs for consistent error reporting
+- ServiceWorker & backend: improved install/activate flows, clients.claim(), cache cleaning on activation, backend APIs to purge cache and trigger reloads/notifications
+- TypedServer / servertools: addRoute path pattern parsing (named params & wildcards), safer HTML injection for reload script, TypedRequest controller and service worker route helpers
+- Various safety and compatibility improvements (response cloning, header normalization, cache-control decisions, and fallback behaviors)
+
 ## 2025-12-04 - 6.2.0 - feat(web_serviceworker)
 Add service-worker dashboard and request deduplication; improve caching, metrics and error handling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "6.2.0",
+  "version": "6.5.0",
   "description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
   "type": "module",
   "exports": {

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@api.global/typedserver',
-  version: '6.2.0',
+  version: '6.5.0',
   description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }

ts/classes.typedserver.ts

@@ -271,7 +271,11 @@ export class TypedServer {
     // Setup file watching
     if (this.options.watch && this.options.serveDir) {
       try {
-        this.smartwatchInstance = new plugins.smartwatch.Smartwatch([this.options.serveDir]);
+        // Use glob pattern to match all files recursively in serveDir
+        const watchGlob = this.options.serveDir.endsWith('/')
+          ? `${this.options.serveDir}**/*`
+          : `${this.options.serveDir}/**/*`;
+        this.smartwatchInstance = new plugins.smartwatch.Smartwatch([watchGlob]);
         await this.smartwatchInstance.start();
         (await this.smartwatchInstance.getObservableFor('change')).subscribe(async () => {
           await this.createServeDirHash();
@@ -496,6 +500,30 @@ export class TypedServer {
       return;
     }
 
+    // Push cache invalidation to service workers first
+    try {
+      const swConnections = await this.typedsocket.findAllTargetConnectionsByTag('serviceworker');
+      for (const connection of swConnections) {
+        const pushCacheInvalidate =
+          this.typedsocket.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
+            'serviceworker_cacheInvalidate',
+            connection
+          );
+        pushCacheInvalidate.fire({
+          reason: 'File change detected',
+          timestamp: this.lastReload,
+        }).catch(err => {
+          console.warn('Failed to push cache invalidation to service worker:', err);
+        });
+      }
+      if (swConnections.length > 0) {
+        console.log(`Pushed cache invalidation to ${swConnections.length} service worker(s)`);
+      }
+    } catch (error) {
+      console.warn('Failed to notify service workers:', error);
+    }
+
+    // Notify frontend clients
     try {
       const connections = await this.typedsocket.findAllTargetConnectionsByTag(
         'typedserver_frontend'

ts/servertools/tools.serviceworker.ts

@@ -84,6 +84,48 @@ export const addServiceWorkerRoute = (
         )
       );
 
+      // Speedtest handler for measuring connection speed
+      typedrouter.addTypedHandler(
+        new plugins.typedrequest.TypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
+          'serviceworker_speedtest',
+          async (reqArg) => {
+            const startTime = Date.now();
+            const payloadSizeKB = reqArg.payloadSizeKB || 100;
+            const sizeBytes = payloadSizeKB * 1024;
+            let payload: string | undefined;
+            let bytesTransferred = 0;
+
+            switch (reqArg.type) {
+              case 'download':
+                // Generate random payload for download test
+                payload = 'x'.repeat(sizeBytes);
+                bytesTransferred = sizeBytes;
+                break;
+              case 'upload':
+                // For upload, measure bytes received from client
+                bytesTransferred = reqArg.payload?.length || 0;
+                break;
+              case 'latency':
+                // Minimal payload for latency test
+                bytesTransferred = 1;
+                break;
+            }
+
+            const durationMs = Date.now() - startTime;
+            // Speed in Mbps: (bytes * 8 bits/byte) / (ms * 1000 to get seconds) / 1,000,000 for Mbps
+            const speedMbps = durationMs > 0 ? (bytesTransferred * 8) / (durationMs * 1000) : 0;
+
+            return {
+              durationMs,
+              bytesTransferred,
+              speedMbps,
+              timestamp: Date.now(),
+              payload, // Only for download tests
+            };
+          }
+        )
+      );
+
       const response = await typedrouter.routeAndAddResponse(body);
       return new Response(plugins.smartjson.stringify(response), {
         status: 200,

ts_interfaces/serviceworker.ts

@@ -189,4 +189,49 @@ export interface IConnectionResult {
   error?: string;
   attempts?: number;
   duration?: number;
+}
+
+// ===============
+// Speedtest interfaces
+// ===============
+
+/**
+ * Cache invalidation request from server to service worker
+ */
+export interface IRequest_Serviceworker_CacheInvalidate
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_CacheInvalidate
+  > {
+  method: 'serviceworker_cacheInvalidate';
+  request: {
+    reason: string;
+    timestamp: number;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+/**
+ * Speedtest request between service worker and backend
+ */
+export interface IRequest_Serviceworker_Speedtest
+  extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IRequest_Serviceworker_Speedtest
+  > {
+  method: 'serviceworker_speedtest';
+  request: {
+    type: 'download' | 'upload' | 'latency';
+    payloadSizeKB?: number;  // Size of test payload in KB (default: 100)
+    payload?: string;        // For upload tests, the payload to send
+  };
+  response: {
+    durationMs: number;
+    bytesTransferred: number;
+    speedMbps: number;
+    timestamp: number;
+    payload?: string;        // For download tests, the payload received
+  };
 }

ts_web_inject/index.ts

@@ -75,8 +75,17 @@ export class ReloadChecker {
       this.infoscreen.setText(reloadText);
       if (globalThis.globalSw?.purgeCache) {
         await globalThis.globalSw.purgeCache();
+      } else if ('caches' in window) {
+        // Fallback: clear caches via Cache API when service worker client isn't initialized
+        try {
+          const cacheKeys = await caches.keys();
+          await Promise.all(cacheKeys.map(key => caches.delete(key)));
+          logger.log('ok', 'Cleared caches via Cache API fallback');
+        } catch (err) {
+          logger.log('warn', `Failed to clear caches via Cache API: ${err}`);
+        }
       } else {
-        console.log('globalThis.globalSw not found...');
+        console.log('globalThis.globalSw not found and Cache API not available...');
       }
       this.infoscreen.setText(`cleaned caches`);
       await plugins.smartdelay.delayFor(200);

ts_web_serviceworker/classes.backend.ts

@@ -1,6 +1,7 @@
 import * as plugins from './plugins.js';
 import * as interfaces from '../dist_ts_interfaces/index.js';
 import { logger } from './logging.js';
+import { getMetricsCollector } from './classes.metrics.js';
 
 // Add type definitions for ServiceWorker APIs
 declare global {
@@ -41,11 +42,15 @@ declare global {
  */
 export class ServiceworkerBackend {
   public deesComms = new plugins.deesComms.DeesComms();
+  private swSelf: ServiceWorkerGlobalScope;
+  private clientUpdateInterval: ReturnType<typeof setInterval> | null = null;
 
   constructor(optionsArg: {
     self: any;
     purgeCache: (reqArg: interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['request']) => Promise<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['response']>;
   }) {
+    this.swSelf = optionsArg.self as unknown as ServiceWorkerGlobalScope;
+    const metrics = getMetricsCollector();
 
     // lets handle wakestuff
     optionsArg.self.addEventListener('message', (event) => {
@@ -53,16 +58,51 @@ export class ServiceworkerBackend {
         console.log('sw-backend: got wake up call');
       }
     });
+
     this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Client_Serviceworker_ConnectionPolling>('broadcastConnectionPolling', async reqArg => {
+      // Record connection attempt
+      metrics.recordConnectionAttempt();
+      metrics.recordConnectionSuccess();
+      // Update connected clients count
+      await this.updateConnectedClientsCount();
       return {
         serviceworkerId: '123'
       };
-    })
+    });
 
     this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache>('purgeServiceWorkerCache', async reqArg => {
       console.log(`Executing purge cache in serviceworker backend.`)
       return await optionsArg.purgeCache?.(reqArg);
     });
+
+    // Periodically update connected clients count
+    this.startClientCountUpdates();
+  }
+
+  /**
+   * Start periodic updates of connected client count
+   */
+  private startClientCountUpdates(): void {
+    // Update immediately
+    this.updateConnectedClientsCount();
+
+    // Then update every 5 seconds
+    this.clientUpdateInterval = setInterval(() => {
+      this.updateConnectedClientsCount();
+    }, 5000);
+  }
+
+  /**
+   * Update the connected clients count using the Clients API
+   */
+  private async updateConnectedClientsCount(): Promise<void> {
+    try {
+      const clients = await this.swSelf.clients.matchAll({ type: 'window' });
+      const metrics = getMetricsCollector();
+      metrics.setConnectedClients(clients.length);
+    } catch (error) {
+      logger.log('warn', `Failed to update connected clients count: ${error}`);
+    }
   }
 
   /**
@@ -71,7 +111,7 @@ export class ServiceworkerBackend {
   public async triggerReloadAll() {
     try {
       logger.log('info', 'Triggering reload for all clients due to new version');
-      
+
       // Send update message via DeesComms
       // This will be picked up by clients that have registered a handler for 'serviceworker_newVersion'
       await this.deesComms.postMessage({
@@ -79,13 +119,15 @@ export class ServiceworkerBackend {
         request: {},
         messageId: `sw_update_${Date.now()}`
       });
-      
+
       // As a fallback, also use the clients API to reload clients that might not catch the broadcast
-      // We need to type-cast self since TypeScript doesn't recognize ServiceWorker API
-      const swSelf = self as unknown as ServiceWorkerGlobalScope;
-      const clients = await swSelf.clients.matchAll({ type: 'window' });
+      const clients = await this.swSelf.clients.matchAll({ type: 'window' });
       logger.log('info', `Found ${clients.length} clients to reload`);
-      
+
+      // Update metrics with current client count
+      const metrics = getMetricsCollector();
+      metrics.setConnectedClients(clients.length);
+
       for (const client of clients) {
         if ('navigate' in client) {
           // For modern browsers, navigate to the same URL to trigger reload

ts_web_serviceworker/classes.cachemanager.ts

@@ -215,6 +215,11 @@ export class CacheManager {
           fetchEventArg.respondWith(Promise.resolve(dashboard.serveMetrics()));
           return;
         }
+        if (parsedUrl.pathname === '/sw-dash/speedtest') {
+          const dashboard = getDashboardGenerator();
+          fetchEventArg.respondWith(dashboard.runSpeedtest());
+          return;
+        }
 
         // Block requests that we don't want the service worker to handle.
         if (

ts_web_serviceworker/classes.dashboard.ts

@@ -1,4 +1,4 @@
-import { getMetricsCollector, type IServiceWorkerMetrics } from './classes.metrics.js';
+import { getMetricsCollector } from './classes.metrics.js';
 
 /**
  * Dashboard generator that creates a terminal-like metrics display
@@ -29,6 +29,94 @@ export class DashboardGenerator {
     });
   }
 
+  /**
+   * Runs a speedtest and returns the results
+   */
+  public async runSpeedtest(): Promise<Response> {
+    const metrics = getMetricsCollector();
+    const results: {
+      latency?: { durationMs: number; speedMbps: number };
+      download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
+      upload?: { durationMs: number; speedMbps: number; bytesTransferred: number };
+      error?: string;
+      isOnline: boolean;
+    } = { isOnline: false };
+
+    try {
+      // Latency test
+      const latencyStart = Date.now();
+      const latencyResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'latency' },
+        }),
+      });
+
+      if (latencyResponse.ok) {
+        await latencyResponse.json(); // Consume response
+        const latencyDuration = Date.now() - latencyStart;
+        results.latency = { durationMs: latencyDuration, speedMbps: 0 };
+        metrics.recordSpeedtest('latency', latencyDuration);
+        results.isOnline = true;
+        metrics.setOnlineStatus(true);
+      }
+
+      // Download test (100KB)
+      const downloadStart = Date.now();
+      const downloadResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'download', payloadSizeKB: 100 },
+        }),
+      });
+
+      if (downloadResponse.ok) {
+        const downloadData = await downloadResponse.json();
+        const downloadDuration = Date.now() - downloadStart;
+        const bytesTransferred = downloadData.response?.payload?.length || 0;
+        // Speed in Mbps: (bytes * 8) / (ms / 1000) / 1000000 = bytes * 8 / ms / 1000
+        const downloadSpeedMbps = downloadDuration > 0 ? (bytesTransferred * 8) / (downloadDuration * 1000) : 0;
+        results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred };
+        metrics.recordSpeedtest('download', downloadSpeedMbps);
+      }
+
+      // Upload test (100KB)
+      const uploadPayload = 'x'.repeat(100 * 1024);
+      const uploadStart = Date.now();
+      const uploadResponse = await fetch('/sw-typedrequest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'serviceworker_speedtest',
+          request: { type: 'upload', payload: uploadPayload },
+        }),
+      });
+
+      if (uploadResponse.ok) {
+        const uploadDuration = Date.now() - uploadStart;
+        const uploadSpeedMbps = uploadDuration > 0 ? (uploadPayload.length * 8) / (uploadDuration * 1000) : 0;
+        results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: uploadPayload.length };
+        metrics.recordSpeedtest('upload', uploadSpeedMbps);
+      }
+
+    } catch (error) {
+      results.error = error instanceof Error ? error.message : String(error);
+      results.isOnline = false;
+      metrics.setOnlineStatus(false);
+    }
+
+    return new Response(JSON.stringify(results), {
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'no-store',
+      },
+    });
+  }
+
   /**
    * Generates JSON metrics response
    */
@@ -245,6 +333,76 @@ export class DashboardGenerator {
     @keyframes blink {
       50% { opacity: 0; }
     }
+
+    .btn {
+      background: #1a1a1a;
+      border: 1px solid #00ff00;
+      color: #00ff00;
+      padding: 8px 16px;
+      cursor: pointer;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 12px;
+      transition: all 0.2s ease;
+    }
+
+    .btn:hover {
+      background: #00ff00;
+      color: #000;
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .online-indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 0;
+      margin-bottom: 10px;
+      border-bottom: 1px dashed #333;
+    }
+
+    .online-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      transition: background-color 0.3s ease;
+    }
+
+    .online-dot.online {
+      background: #00ff00;
+      box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
+    }
+
+    .online-dot.offline {
+      background: #ff4444;
+      box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
+    }
+
+    .speedtest-results {
+      margin-top: 10px;
+    }
+
+    .speed-bar {
+      height: 8px;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      margin: 4px 0;
+    }
+
+    .speed-fill {
+      height: 100%;
+      background: #00aa00;
+      transition: width 0.5s ease;
+    }
+
+    .btn-row {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
   </style>
 </head>
 <body>
@@ -379,6 +537,43 @@ export class DashboardGenerator {
             <span class="value" id="start-time">${this.formatTimestamp(data.startTime)}</span>
           </div>
         </div>
+
+        <div class="panel">
+          <div class="panel-title">[ SPEEDTEST ]</div>
+          <div class="online-indicator">
+            <span class="online-dot ${data.speedtest.isOnline ? 'online' : 'offline'}" id="online-dot"></span>
+            <span class="value ${data.speedtest.isOnline ? 'success' : 'error'}" id="online-status">${data.speedtest.isOnline ? 'Online' : 'Offline'}</span>
+          </div>
+          <div class="row">
+            <span class="label">Download:</span>
+            <span class="value" id="speed-download">${data.speedtest.lastDownloadSpeedMbps.toFixed(2)} Mbps</span>
+          </div>
+          <div class="speed-bar">
+            <div class="speed-fill" id="speed-download-bar" style="width: ${Math.min(data.speedtest.lastDownloadSpeedMbps, 100)}%"></div>
+          </div>
+          <div class="row">
+            <span class="label">Upload:</span>
+            <span class="value" id="speed-upload">${data.speedtest.lastUploadSpeedMbps.toFixed(2)} Mbps</span>
+          </div>
+          <div class="speed-bar">
+            <div class="speed-fill" id="speed-upload-bar" style="width: ${Math.min(data.speedtest.lastUploadSpeedMbps, 100)}%"></div>
+          </div>
+          <div class="row">
+            <span class="label">Latency:</span>
+            <span class="value" id="speed-latency">${data.speedtest.lastLatencyMs.toFixed(0)} ms</span>
+          </div>
+          <div class="row">
+            <span class="label">Last Test:</span>
+            <span class="value" id="speed-last-test">${this.formatTimestamp(data.speedtest.lastTestTimestamp)}</span>
+          </div>
+          <div class="row">
+            <span class="label">Test Count:</span>
+            <span class="value" id="speed-test-count">${data.speedtest.testCount}</span>
+          </div>
+          <div class="btn-row">
+            <button class="btn" id="run-speedtest" onclick="runSpeedtest()">Run Test</button>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -481,10 +676,82 @@ export class DashboardGenerator {
       document.getElementById('conn-failed').textContent = formatNumber(data.connection.failedConnections);
       document.getElementById('start-time').textContent = formatTimestamp(data.startTime);
 
+      // Speedtest
+      if (data.speedtest) {
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot ' + (data.speedtest.isOnline ? 'online' : 'offline');
+        onlineStatus.textContent = data.speedtest.isOnline ? 'Online' : 'Offline';
+        onlineStatus.className = 'value ' + (data.speedtest.isOnline ? 'success' : 'error');
+
+        document.getElementById('speed-download').textContent = data.speedtest.lastDownloadSpeedMbps.toFixed(2) + ' Mbps';
+        document.getElementById('speed-upload').textContent = data.speedtest.lastUploadSpeedMbps.toFixed(2) + ' Mbps';
+        document.getElementById('speed-latency').textContent = data.speedtest.lastLatencyMs.toFixed(0) + ' ms';
+        document.getElementById('speed-last-test').textContent = formatTimestamp(data.speedtest.lastTestTimestamp);
+        document.getElementById('speed-test-count').textContent = formatNumber(data.speedtest.testCount);
+
+        // Update speed bars (max 100 Mbps for visualization)
+        document.getElementById('speed-download-bar').style.width = Math.min(data.speedtest.lastDownloadSpeedMbps, 100) + '%';
+        document.getElementById('speed-upload-bar').style.width = Math.min(data.speedtest.lastUploadSpeedMbps, 100) + '%';
+      }
+
       // Last refresh
       document.getElementById('last-refresh').textContent = new Date().toLocaleTimeString();
     }
 
+    // Speedtest function
+    let speedtestRunning = false;
+    async function runSpeedtest() {
+      if (speedtestRunning) return;
+
+      speedtestRunning = true;
+      const btn = document.getElementById('run-speedtest');
+      const originalText = btn.textContent;
+      btn.textContent = 'Testing...';
+      btn.disabled = true;
+
+      try {
+        const response = await fetch('/sw-dash/speedtest');
+        const result = await response.json();
+
+        // Update online status immediately
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot ' + (result.isOnline ? 'online' : 'offline');
+        onlineStatus.textContent = result.isOnline ? 'Online' : 'Offline';
+        onlineStatus.className = 'value ' + (result.isOnline ? 'success' : 'error');
+
+        if (result.download) {
+          document.getElementById('speed-download').textContent = result.download.speedMbps.toFixed(2) + ' Mbps';
+          document.getElementById('speed-download-bar').style.width = Math.min(result.download.speedMbps, 100) + '%';
+        }
+        if (result.upload) {
+          document.getElementById('speed-upload').textContent = result.upload.speedMbps.toFixed(2) + ' Mbps';
+          document.getElementById('speed-upload-bar').style.width = Math.min(result.upload.speedMbps, 100) + '%';
+        }
+        if (result.latency) {
+          document.getElementById('speed-latency').textContent = result.latency.durationMs.toFixed(0) + ' ms';
+        }
+        document.getElementById('speed-last-test').textContent = 'just now';
+
+        if (result.error) {
+          console.error('Speedtest error:', result.error);
+        }
+      } catch (err) {
+        console.error('Failed to run speedtest:', err);
+        // Mark as offline on error
+        const onlineDot = document.getElementById('online-dot');
+        const onlineStatus = document.getElementById('online-status');
+        onlineDot.className = 'online-dot offline';
+        onlineStatus.textContent = 'Offline';
+        onlineStatus.className = 'value error';
+      } finally {
+        speedtestRunning = false;
+        btn.textContent = originalText;
+        btn.disabled = false;
+      }
+    }
+
     // Auto-refresh every 2 seconds
     setInterval(async () => {
       try {

ts_web_serviceworker/classes.metrics.ts

@@ -47,6 +47,18 @@ export interface IConnectionMetrics {
   failedConnections: number;
 }
 
+/**
+ * Interface for speedtest metrics
+ */
+export interface ISpeedtestMetrics {
+  lastDownloadSpeedMbps: number;
+  lastUploadSpeedMbps: number;
+  lastLatencyMs: number;
+  lastTestTimestamp: number;
+  testCount: number;
+  isOnline: boolean;
+}
+
 /**
  * Combined metrics interface
  */
@@ -55,6 +67,7 @@ export interface IServiceWorkerMetrics {
   network: INetworkMetrics;
   update: IUpdateMetrics;
   connection: IConnectionMetrics;
+  speedtest: ISpeedtestMetrics;
   startTime: number;
   uptime: number;
 }
@@ -103,6 +116,14 @@ export class MetricsCollector {
   private successfulConnections = 0;
   private failedConnections = 0;
 
+  // Speedtest metrics
+  private lastDownloadSpeedMbps = 0;
+  private lastUploadSpeedMbps = 0;
+  private lastLatencyMs = 0;
+  private lastSpeedtestTimestamp = 0;
+  private speedtestCount = 0;
+  private isOnline = true;
+
   // Response time tracking
   private responseTimes: IResponseTimeEntry[] = [];
   private readonly maxResponseTimeEntries = 1000;
@@ -221,6 +242,47 @@ export class MetricsCollector {
     this.connectedClients = count;
   }
 
+  // ===================
+  // Speedtest Metrics
+  // ===================
+
+  public recordSpeedtest(type: 'download' | 'upload' | 'latency', value: number): void {
+    this.speedtestCount++;
+    this.lastSpeedtestTimestamp = Date.now();
+    this.isOnline = true;
+
+    switch (type) {
+      case 'download':
+        this.lastDownloadSpeedMbps = value;
+        logger.log('info', `[Metrics] Speedtest download: ${value.toFixed(2)} Mbps`);
+        break;
+      case 'upload':
+        this.lastUploadSpeedMbps = value;
+        logger.log('info', `[Metrics] Speedtest upload: ${value.toFixed(2)} Mbps`);
+        break;
+      case 'latency':
+        this.lastLatencyMs = value;
+        logger.log('info', `[Metrics] Speedtest latency: ${value.toFixed(0)} ms`);
+        break;
+    }
+  }
+
+  public setOnlineStatus(online: boolean): void {
+    this.isOnline = online;
+    logger.log('info', `[Metrics] Online status: ${online ? 'online' : 'offline'}`);
+  }
+
+  public getSpeedtestMetrics(): ISpeedtestMetrics {
+    return {
+      lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
+      lastUploadSpeedMbps: this.lastUploadSpeedMbps,
+      lastLatencyMs: this.lastLatencyMs,
+      lastTestTimestamp: this.lastSpeedtestTimestamp,
+      testCount: this.speedtestCount,
+      isOnline: this.isOnline,
+    };
+  }
+
   // ===================
   // Response Time Tracking
   // ===================
@@ -309,6 +371,14 @@ export class MetricsCollector {
         successfulConnections: this.successfulConnections,
         failedConnections: this.failedConnections,
       },
+      speedtest: {
+        lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
+        lastUploadSpeedMbps: this.lastUploadSpeedMbps,
+        lastLatencyMs: this.lastLatencyMs,
+        lastTestTimestamp: this.lastSpeedtestTimestamp,
+        testCount: this.speedtestCount,
+        isOnline: this.isOnline,
+      },
       startTime: this.startTime,
       uptime: now - this.startTime,
     };
@@ -363,6 +433,13 @@ export class MetricsCollector {
     this.successfulConnections = 0;
     this.failedConnections = 0;
 
+    this.lastDownloadSpeedMbps = 0;
+    this.lastUploadSpeedMbps = 0;
+    this.lastLatencyMs = 0;
+    this.lastSpeedtestTimestamp = 0;
+    this.speedtestCount = 0;
+    // Note: isOnline is not reset as it reflects current state
+
     this.responseTimes = [];
 
     logger.log('info', '[Metrics] All metrics reset');

ts_web_serviceworker/classes.serviceworker.ts

@@ -27,6 +27,10 @@ export class ServiceWorker {
   public taskManager: TaskManager;
   public store: plugins.webstore.WebStore;
 
+  // TypedSocket connection for server communication
+  private typedsocket: plugins.typedsocket.TypedSocket;
+  private typedrouter = new plugins.typedrequest.TypedRouter();
+
   constructor(selfArg: interfaces.ServiceWindow) {
     logger.log('info', `Service worker instantiating at ${Date.now()}`);
     this.serviceWindowRef = selfArg;
@@ -76,16 +80,52 @@ export class ServiceWorker {
       try {
         await selfArg.clients.claim();
         logger.log('ok', 'Clients claimed successfully');
-        
+
         await this.cacheManager.cleanCaches('new service worker loaded! :)');
         logger.log('ok', 'Caches cleaned successfully');
-        
+
         done.resolve();
         logger.log('success', `Service worker activated at ${new Date().toISOString()}`);
+
+        // Connect to TypedServer for cache invalidation after activation
+        this.connectToServer();
       } catch (error) {
         logger.log('error', `Service worker activation error: ${error}`);
         done.reject(error);
       }
     });
   }
+
+  /**
+   * Connect to TypedServer via TypedSocket for cache invalidation
+   */
+  private async connectToServer(): Promise<void> {
+    try {
+      // Register handler for cache invalidation from server
+      this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
+        new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
+          logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
+          await this.cacheManager.cleanCaches(reqArg.reason);
+          // Notify all clients to reload
+          await this.leleServiceWorkerBackend.triggerReloadAll();
+          return { success: true };
+        })
+      );
+
+      // Connect to server via TypedSocket
+      this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
+        this.typedrouter,
+        this.serviceWindowRef.location.origin
+      );
+
+      // Tag this connection as a service worker for server-side filtering
+      await this.typedsocket.setTag('serviceworker', {});
+
+      logger.log('ok', 'Service worker connected to TypedServer via TypedSocket');
+    } catch (error: any) {
+      logger.log('warn', `Service worker TypedSocket connection failed: ${error?.message || error}`);
+      // Retry connection after a delay
+      setTimeout(() => this.connectToServer(), 10000);
+    }
+  }
 }

ts_web_serviceworker/plugins.ts

@@ -5,8 +5,9 @@ export { interfaces };
 
 // @apiglobal scope
 import * as typedrequest from '@api.global/typedrequest';
+import * as typedsocket from '@api.global/typedsocket';
 
-export { typedrequest };
+export { typedrequest, typedsocket };
 
 // @pushrocks scope
 import * as smartdelay from '@push.rocks/smartdelay';