3.0.60

changelog.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 2025-02-04 - 3.0.60 - fix(cachemanager)
+Improve cache management and error handling
+
+- Updated comments for clarity and consistency.
+- Enhanced error handling in `fetch` event listener.
+- Optimized cache key management and cleanup process.
+- Ensured CORS headers are set for cached responses.
+- Improved logging for caching operations.
+
+## 2025-02-03 - 3.0.59 - fix(serviceworker)
+Fixed CORS and Cache Control handling for Service Worker
+
+- Improved handling of CORS settings for external requests.
+- Preserved important headers while excluding caching headers.
+- Ensured the presence of CORS headers in cached responses.
+- Adjusted Cache-Control headers to prevent browser caching but allow service worker caching.
+
+## 2025-02-03 - 3.0.58 - fix(network-manager)
+Refined network management logic for better offline handling.
+
+- Improved logic to handle missing connections more gracefully.
+- Added detailed online/offline connection status logging.
+- Implemented a check for stale cache with a grace period for offline scenarios.
+- Network requests now use optimized retries and timeouts.
+
+## 2025-02-03 - 3.0.57 - fix(updateManager)
+Refine cache management for service worker updates.
+
+- Ensured cache is forcibly updated if older than defined maximum age.
+- Implemented interval checks and forced updates for cache staleness.
+- Updated version information and cache timestamps upon forced updates or validations.
+
+## 2025-02-03 - 3.0.56 - fix(cachemanager)
+Adjust cache control headers and fix redundant code
+
+- Remove duplicate assetbroker URLs in the cache evaluation logic.
+- Update cache control headers to improve caching behavior.
+- Increase the timeout for fetch operations to improve compatibility.
+
 ## 2025-01-28 - 3.0.55 - fix(server)
 Fix response content manipulation for HTML files with injectReload
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "3.0.55",
+  "version": "3.0.60",
   "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: '3.0.55',
+  version: '3.0.60',
   description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
 }

ts_web_serviceworker/classes.cachemanager.ts

@@ -17,22 +17,30 @@ export class CacheManager {
 
   private _setupCache = () => {
     const createMatchRequest = (requestArg: Request) => {
-      // lets create a matchRequest
+      // Create a matchRequest.
       let matchRequest: Request;
-      if (requestArg.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin)) {
+      if (
+        requestArg.url.startsWith(
+          this.losslessServiceWorkerRef.serviceWindowRef.location.origin
+        )
+      ) {
         // internal request
         matchRequest = requestArg;
       } else {
+        // For external requests, create a new Request with CORS settings.
         matchRequest = new Request(requestArg.url, {
-          ...requestArg.clone(),
-          mode: 'cors'
+          method: requestArg.method,
+          headers: requestArg.headers,
+          mode: 'cors',
+          credentials: 'same-origin',
+          redirect: 'follow'
         });
       }
       return matchRequest;
     };
-  
+
     /**
-     * creates a 500 response
+     * Creates a 500 response
      */
     const create500Response = async (requestArg: Request, responseArg: Response) => {
       return new Response(
@@ -71,45 +79,41 @@ export class CacheManager {
         }
       );
     };
-  
+
     // A list of local resources we always want to be cached.
     this.losslessServiceWorkerRef.serviceWindowRef.addEventListener('fetch', async (fetchEventArg: any) => {
-      // Lets block scopes we don't want to be passing through the serviceworker
+      // Block scopes we don't want the serviceworker to handle.
       const originalRequest: Request = fetchEventArg.request;
       const parsedUrl = new URL(originalRequest.url);
       if (
-        parsedUrl.hostname.includes('paddle.com')
-        || parsedUrl.hostname.includes('paypal.com')
-        || parsedUrl.hostname.includes('reception.lossless.one')
-        || parsedUrl.pathname.startsWith('/socket.io')
-        || originalRequest.url.startsWith('https://umami.')
+        parsedUrl.hostname.includes('paddle.com') ||
+        parsedUrl.hostname.includes('paypal.com') ||
+        parsedUrl.hostname.includes('reception.lossless.one') ||
+        parsedUrl.pathname.startsWith('/socket.io') ||
+        originalRequest.url.startsWith('https://umami.')
       ) {
-        logger.log('note',`serviceworker not active for ${parsedUrl.toString()}`);
+        logger.log('note', `serviceworker not active for ${parsedUrl.toString()}`);
         return;
       }
-      
-      // lets continue for the rest
+
+      // Continue for the rest.
       const done = plugins.smartpromise.defer<Response>();
       fetchEventArg.respondWith(done.promise);
-  
+
       if (
         (originalRequest.method === 'GET' &&
           (originalRequest.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin) &&
             !originalRequest.url.includes('/api/') &&
             !originalRequest.url.includes('smartserve/reloadcheck'))) ||
         originalRequest.url.includes('https://assetbroker.') ||
-        originalRequest.url.includes('https://assetbroker.') ||
-        originalRequest.url.includes('https://assetbroker.') ||
         originalRequest.url.includes('https://unpkg.com') ||
         originalRequest.url.includes('https://fonts.googleapis.com') ||
         originalRequest.url.includes('https://fonts.gstatic.com')
       ) {
-  
-        // lets see if things need to be updated
-        // not waiting here
+        // Check for updates asynchronously.
         this.losslessServiceWorkerRef.updateManager.checkUpdate(this);
-  
-        // this code block is executed for local requests
+
+        // Handle local or approved remote requests.
         const matchRequest = createMatchRequest(originalRequest);
         const cachedResponse = await caches.match(matchRequest);
         if (cachedResponse) {
@@ -117,15 +121,14 @@ export class CacheManager {
           done.resolve(cachedResponse);
           return;
         }
-  
-        // in case there is no cached response
+
+        // No cached response found; try to fetch and cache.
         logger.log('info', `NOTYETCACHED: trying to cache ${matchRequest.url}`);
         const newResponse: Response = await fetch(matchRequest).catch(async err => {
           return await create500Response(matchRequest, new Response(err.message));
         });
-  
-        // fill cache
-        // Put a copy of the response in the runtime cache.
+
+        // If status > 299 or opaque response, don't cache.
         if (newResponse.status > 299 || newResponse.type === 'opaque') {
           logger.log(
             'error',
@@ -137,39 +140,55 @@ export class CacheManager {
         } else {
           const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
           const responseToPutToCache = newResponse.clone();
+
+          // Create new headers preserving all except caching-related headers.
           const headers = new Headers();
           responseToPutToCache.headers.forEach((value, key) => {
-            if (
-              value !== 'Cache-Control'
-              && value !== 'cache-control'
-              && value !== 'Expires'
-              && value !== 'expires'
-              && value !== 'Pragma'
-              && value !== 'pragma'
-            ) {
+            if (![
+              'Cache-Control',
+              'cache-control',
+              'Expires',
+              'expires',
+              'Pragma',
+              'pragma'
+            ].includes(key)) {
               headers.set(key, value);
             }
           });
-          headers.set('Cache-Control', 'no-cache, no-store, must-revalidate');
+
+          // Ensure CORS headers are present in cached response.
+          if (!headers.has('Access-Control-Allow-Origin')) {
+            headers.set('Access-Control-Allow-Origin', '*');
+          }
+          if (!headers.has('Access-Control-Allow-Methods')) {
+            headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+          }
+          if (!headers.has('Access-Control-Allow-Headers')) {
+            headers.set('Access-Control-Allow-Headers', 'Content-Type');
+          }
+          // Prevent browser caching while allowing service worker caching.
+          headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
           headers.set('Pragma', 'no-cache');
           headers.set('Expires', '0');
-          await cache.put(matchRequest, new Response(responseToPutToCache.body, {
-            ...responseToPutToCache,
+          headers.set('Surrogate-Control', 'no-store');
+
+          // IMPORTANT: Read the entire response body as a blob so that
+          // Safari does not have issues with a locked stream when caching.
+          const bodyBlob = await responseToPutToCache.blob();
+          const newCachedResponse = new Response(bodyBlob, {
+            status: responseToPutToCache.status,
+            statusText: responseToPutToCache.statusText,
             headers
-          }));
-          logger.log(
-            'ok',
-            `NOWCACHED: cached response for ${matchRequest.url} for subsequent requests!`
-          );
+          });
+          await cache.put(matchRequest, newCachedResponse);
+          logger.log('ok', `NOWCACHED: cached response for ${matchRequest.url} for subsequent requests!`);
           done.resolve(newResponse);
         }
       } else {
-        // this code block is executed for remote requests
+        // For remote requests that don't qualify for caching.
         logger.log(
           'ok',
-          `NOTCACHED: not caching any responses for ${
-            originalRequest.url
-          }. Fetching from origin now...`
+          `NOTCACHED: not caching any responses for ${originalRequest.url}. Fetching from origin now...`
         );
         done.resolve(
           await fetch(originalRequest).catch(async err => {
@@ -181,45 +200,41 @@ export class CacheManager {
   }
 
   /**
-   * update caches
-   * @param reasonArg
-   */
-
-  /**
-   * cleans all caches
-   * should only be run when running a new service worker
+   * Cleans all caches.
+   * Should only be run when running a new service worker.
    * @param reasonArg
    */
   public cleanCaches = async (reasonArg = 'no reason given') => {
     logger.log('info', `MAJOR CACHEEVENT: cleaning caches now! Reason: ${reasonArg}`);
     const cacheNames = await caches.keys();
-    
+
     const deletePromises = cacheNames.map(cacheToDelete => {
-        const deletePromise = caches.delete(cacheToDelete);
-        deletePromise.then(() => {
-          logger.log('ok', `Deleted cache ${cacheToDelete}`);
-        });
-        return deletePromise;
+      const deletePromise = caches.delete(cacheToDelete);
+      deletePromise.then(() => {
+        logger.log('ok', `Deleted cache ${cacheToDelete}`);
       });
+      return deletePromise;
+    });
     await Promise.all(deletePromises);
   }
 
   /**
-   * revalidate cache
+   * Revalidates the runtime cache.
    */
   public async revalidateCache() {
     const runtimeCache = await caches.open(this.usedCacheNames.runtimeCacheName);
     const cacheKeys = await runtimeCache.keys();
     for (const requestArg of cacheKeys) {
+      // Get the cached response.
       const cachedResponse = runtimeCache.match(requestArg);
 
-      // lets get a new response for comparison
+      // Fetch a new response for comparison.
       const clonedRequest = requestArg.clone();
-      const response = await plugins.smartpromise.timeoutWrap(fetch(clonedRequest), 1000);
+      const response = await plugins.smartpromise.timeoutWrap(fetch(clonedRequest), 5000); // Increased timeout for better mobile compatibility
       if (response && response.status >= 200 && response.status < 300) {
         await runtimeCache.delete(requestArg);
         await runtimeCache.put(requestArg, response);
       }
     }
   }
-}
+}

ts_web_serviceworker/classes.networkmanager.ts

@@ -1,18 +1,37 @@
 import * as plugins from './plugins.js';
 import { ServiceWorker } from './classes.serviceworker.js';
+import { logger } from './logging.js';
 
 export class NetworkManager {
   public serviceWorkerRef: ServiceWorker;
   public webRequest: plugins.webrequest.WebRequest;
+  private isOffline: boolean = false;
+  private lastOnlineCheck: number = 0;
+  private readonly ONLINE_CHECK_INTERVAL = 30000; // 30 seconds
 
   public previousState: string;
 
   constructor(serviceWorkerRefArg: ServiceWorker) {
     this.serviceWorkerRef = serviceWorkerRefArg;
     this.webRequest = new plugins.webrequest.WebRequest();
+    
+    // Listen for connection changes
     this.getConnection()?.addEventListener('change', () => {
       this.updateConnectionStatus();
     });
+
+    // Listen for online/offline events
+    self.addEventListener('online', () => {
+      this.isOffline = false;
+      logger.log('info', 'Device is now online');
+      this.updateConnectionStatus();
+    });
+
+    self.addEventListener('offline', () => {
+      this.isOffline = true;
+      logger.log('warn', 'Device is now offline');
+      this.updateConnectionStatus();
+    });
   }
 
   /**
@@ -28,6 +47,81 @@ export class NetworkManager {
   }
 
   public updateConnectionStatus() {
-    console.log(`Connection type changed from ${this.previousState} to ${this.getEffectiveType()}`);
+    const currentType = this.getEffectiveType();
+    logger.log('info', `Connection type changed from ${this.previousState} to ${currentType}`);
+    this.previousState = currentType;
+  }
+
+  /**
+   * Checks if the device is currently online by attempting to contact the server
+   * @returns Promise<boolean> true if online, false if offline
+   */
+  public async checkOnlineStatus(): Promise<boolean> {
+    const now = Date.now();
+    // Only check if enough time has passed since last check
+    if (now - this.lastOnlineCheck < this.ONLINE_CHECK_INTERVAL) {
+      return !this.isOffline;
+    }
+
+    try {
+      const response = await fetch('/sw-typedrequest', {
+        method: 'HEAD',
+        cache: 'no-cache'
+      });
+      this.isOffline = false;
+      this.lastOnlineCheck = now;
+      return true;
+    } catch (error) {
+      this.isOffline = true;
+      this.lastOnlineCheck = now;
+      logger.log('warn', 'Device appears to be offline');
+      return false;
+    }
+  }
+
+  /**
+   * Makes a network request with offline handling
+   * @param request The request to make
+   * @param options Additional options
+   * @returns Promise<Response>
+   */
+  public async makeRequest<T>(request: Request | string, options: {
+    timeoutMs?: number;
+    retries?: number;
+    backoffMs?: number;
+  } = {}): Promise<Response> {
+    const {
+      timeoutMs = 5000,
+      retries = 1,
+      backoffMs = 1000
+    } = options;
+
+    let lastError: Error;
+    for (let i = 0; i <= retries; i++) {
+      try {
+        const isOnline = await this.checkOnlineStatus();
+        if (!isOnline) {
+          throw new Error('Device is offline');
+        }
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+        const response = await fetch(request, {
+          ...typeof request === 'string' ? {} : request,
+          signal: controller.signal
+        });
+
+        clearTimeout(timeoutId);
+        return response;
+      } catch (error) {
+        lastError = error;
+        if (i < retries) {
+          await new Promise(resolve => setTimeout(resolve, backoffMs * (i + 1)));
+        }
+      }
+    }
+
+    throw lastError;
   }
 }

ts_web_serviceworker/classes.updatemanager.ts

@@ -17,24 +17,55 @@ export class UpdateManager {
   /**
    * checks wether an update is needed
    */
+  private readonly MAX_CACHE_AGE = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+  private readonly MIN_CHECK_INTERVAL = 100000; // 100 seconds in milliseconds
+  private readonly OFFLINE_GRACE_PERIOD = 7 * 24 * 60 * 60 * 1000; // 7 days grace period when offline
+  private lastCacheTimestamp: number = 0;
+
   public async checkUpdate(cacheManager: CacheManager): Promise<boolean> {
     const lswVersionInfoKey = 'versionInfo';
+    const cacheTimestampKey = 'cacheTimestamp';
+
+    // Initialize or load version info
     if (!this.lastVersionInfo && !(await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
       this.lastVersionInfo = {
         appHash: '',
         appSemVer: 'v0.0.0',
       };
-    } else if (
-      !this.lastVersionInfo &&
-      (await this.serviceworkerRef.store.check(lswVersionInfoKey))
-    ) {
+    } else if (!this.lastVersionInfo && (await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
       this.lastVersionInfo = await this.serviceworkerRef.store.get(lswVersionInfoKey);
     }
 
+    // Load or initialize cache timestamp
+    if (await this.serviceworkerRef.store.check(cacheTimestampKey)) {
+      this.lastCacheTimestamp = await this.serviceworkerRef.store.get(cacheTimestampKey);
+    }
+
     const now = Date.now();
     const millisSinceLastCheck = now - this.lastUpdateCheck;
-    if (millisSinceLastCheck < 100000) {
-      // TODO account for being offline
+    const cacheAge = now - this.lastCacheTimestamp;
+
+    // Check if we need to handle stale cache
+    if (cacheAge > this.MAX_CACHE_AGE) {
+      const isOnline = await this.serviceworkerRef.networkManager.checkOnlineStatus();
+      
+      if (isOnline) {
+        logger.log('info', `Cache is older than ${this.MAX_CACHE_AGE}ms, forcing update...`);
+        await this.forceUpdate(cacheManager);
+        return true;
+      } else if (cacheAge > this.OFFLINE_GRACE_PERIOD) {
+        // If we're offline and beyond grace period, warn but continue serving cached content
+        logger.log('warn', `Cache is stale and device is offline. Cache age: ${cacheAge}ms. Using cached content with warning.`);
+        // We could potentially show a warning to the user here
+        return false;
+      } else {
+        logger.log('info', `Cache is stale but device is offline. Within grace period. Using cached content.`);
+        return false;
+      }
+    }
+
+    // Regular update check interval
+    if (millisSinceLastCheck < this.MIN_CHECK_INTERVAL && cacheAge < this.MAX_CACHE_AGE) {
       return false;
     }
     logger.log('info', 'checking for update of the app by comparing app hashes...');
@@ -49,9 +80,17 @@ export class UpdateManager {
       this.performAsyncUpdateDebouncedTask.trigger();
       this.lastVersionInfo = currentVersionInfo;
       await this.serviceworkerRef.store.set(lswVersionInfoKey, this.lastVersionInfo);
+      
+      // Update cache timestamp
+      this.lastCacheTimestamp = now;
+      await this.serviceworkerRef.store.set('cacheTimestamp', now);
     } else {
       logger.log('ok', 'caches are still valid, performing revalidation in a bit...');
       this.performAsyncCacheRevalidationDebouncedTask.trigger();
+      
+      // Update cache timestamp after successful revalidation
+      this.lastCacheTimestamp = now;
+      await this.serviceworkerRef.store.set('cacheTimestamp', now);
     }
   }
 
@@ -59,17 +98,49 @@ export class UpdateManager {
    * gets the apphash from the server
    */
   public async getVersionInfoFromServer() {
-    const getAppHashRequest = new plugins.typedrequest.TypedRequest<
-      interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo
-    >('/sw-typedrequest', 'serviceworker_versionInfo');
-    const result = await getAppHashRequest.fire({});
-    return result;
+    try {
+      const getAppHashRequest = new plugins.typedrequest.TypedRequest<
+        interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo
+      >('/sw-typedrequest', 'serviceworker_versionInfo');
+      
+      // Use networkManager for the request with retries and timeout
+      const response = await this.serviceworkerRef.networkManager.makeRequest('/sw-typedrequest', {
+        timeoutMs: 5000,
+        retries: 2,
+        backoffMs: 1000
+      });
+      
+      const result = await response.json();
+      return result;
+    } catch (error) {
+      logger.log('warn', `Failed to get version info from server: ${error.message}`);
+      throw error;
+    }
   }
 
   // tasks
   /**
    * this task is executed once we know that there is a new version available
    */
+  private async forceUpdate(cacheManager: CacheManager) {
+    try {
+      logger.log('info', 'Forcing cache update due to staleness');
+      const currentVersionInfo = await this.getVersionInfoFromServer();
+      
+      // Only proceed with cache cleaning if we successfully got new version info
+      await this.serviceworkerRef.cacheManager.cleanCaches('Cache is stale, forcing update.');
+      this.lastVersionInfo = currentVersionInfo;
+      await this.serviceworkerRef.store.set('versionInfo', this.lastVersionInfo);
+      this.lastCacheTimestamp = Date.now();
+      await this.serviceworkerRef.store.set('cacheTimestamp', this.lastCacheTimestamp);
+      await this.serviceworkerRef.leleServiceWorkerBackend.triggerReloadAll();
+    } catch (error) {
+      logger.log('error', `Failed to force update: ${error.message}. Keeping existing cache.`);
+      // If update fails, we'll keep using the existing cache
+      throw error;
+    }
+  }
+
   public performAsyncUpdateDebouncedTask = new plugins.taskbuffer.TaskDebounced({
     name: 'performAsyncUpdate',
     taskFunction: async () => {