3.0.62

changelog.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 2025-02-04 - 3.0.62 - fix(Service Worker)
+Refactor and clean up the cache logic in the Service Worker to improve maintainability and handle Safari-specific cache behavior.
+
+- Refactored logic for determining cached domains, enhancing the readability and maintainability of the code.
+- Improved handling of CORS settings in caching requests, notably bypassing caching for soft cached domains in Safari to avoid CORS issues.
+- Enhanced error response creation for failed resource fetching, maintaining clarity on why and how certain resources were not fetched or cached.
+- Revised the structure of the caching logic to ensure consistent behavior across all supported browsers.
+
+## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
+Fixed caching mechanism to better support Safari's handling of soft-cached domains.
+
+- Added logic to differentiate between hard and soft cached domains.
+- Implemented special handling for soft cached domains on Safari by bypassing caching.
+- Ensured appropriate CORS headers are present in cached responses.
+- Improved error handling with informative 500 error responses.
+- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
+
+## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
+Fixed caching mechanism to better support Safari's handling of soft-cached domains.
+
+- Added logic to differentiate between hard and soft cached domains.
+- Implemented special handling for soft cached domains on Safari by bypassing caching.
+- Ensured appropriate CORS headers are present in cached responses.
+- Improved error handling with informative 500 error responses.
+- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
+
+## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
+Fixed caching mechanism to better support Safari's handling of soft-cached domains.
+
+- Added logic to differentiate between hard and soft cached domains.
+- Implemented special handling for soft cached domains on Safari by bypassing caching.
+- Ensured appropriate CORS headers are present in cached responses.
+- Improved error handling with informative 500 error responses.
+- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
+
 ## 2025-02-04 - 3.0.60 - fix(cachemanager)
 Improve cache management and error handling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.global/typedserver",
-  "version": "3.0.60",
+  "version": "3.0.62",
   "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.60',
+  version: '3.0.62',
   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

@@ -10,81 +10,127 @@ export class CacheManager {
     runtimeCacheName: 'runtime'
   };
 
+  /**
+   * Hard cached domains are always attempted to be cached.
+   * For example, your internal origin, fonts, CDNs, etc.
+   */
+  public hardCachedDomains: string[];
+
+  /**
+   * Soft cached domains will be cached normally on non‑Safari browsers,
+   * but on Safari caching is bypassed to avoid CORS issues.
+   */
+  public softCachedDomains: string[];
+
   constructor(losslessServiceWorkerRefArg: ServiceWorker) {
     this.losslessServiceWorkerRef = losslessServiceWorkerRefArg;
+
+    // Default hard cached domains.
+    this.hardCachedDomains = [
+      this.losslessServiceWorkerRef.serviceWindowRef.location.origin,
+      'https://unpkg.com',
+      'https://fonts.googleapis.com',
+      'https://fonts.gstatic.com'
+    ];
+
+    // Default soft cached domains.
+    this.softCachedDomains = [
+      'https://assetbroker.'
+    ];
+
     this._setupCache();
   }
 
-  private _setupCache = () => {
-    const createMatchRequest = (requestArg: Request) => {
-      // Create a matchRequest.
-      let matchRequest: Request;
-      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, {
-          method: requestArg.method,
-          headers: requestArg.headers,
-          mode: 'cors',
-          credentials: 'same-origin',
-          redirect: 'follow'
-        });
-      }
-      return matchRequest;
-    };
+  /**
+   * Returns true if the given URL matches a hard cached domain.
+   */
+  private isHardCached(url: string): boolean {
+    return this.hardCachedDomains.some(domain => url.includes(domain));
+  }
 
-    /**
-     * Creates a 500 response
-     */
-    const create500Response = async (requestArg: Request, responseArg: Response) => {
-      return new Response(
-        `
-        <html>
-          <head>
-            <style>
-              .note {
-                padding: 10px;
-                color: #fff;
-                background: #000;
-                border-bottom: 1px solid #e4002b;
-                margin-bottom: 20px;
-              }
-            </style>
-          </head>
-          <body>
-          
+  /**
+   * Returns true if the given URL matches a soft cached domain.
+   */
+  private isSoftCached(url: string): boolean {
+    return this.softCachedDomains.some(domain => url.includes(domain));
+  }
+
+  /**
+   * Returns true if the given URL should be cached (hard or soft).
+   */
+  private isCacheable(url: string): boolean {
+    return this.isHardCached(url) || this.isSoftCached(url);
+  }
+
+  /**
+   * Creates a new Request with appropriate CORS settings.
+   */
+  private createMatchRequest(requestArg: Request): Request {
+    let matchRequest: Request;
+    // For internal requests, use the original request.
+    if (requestArg.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin)) {
+      matchRequest = requestArg;
+    } else {
+      // For external requests, choose the request mode based on whether the URL is soft-cached.
+      const isSoft = this.isSoftCached(requestArg.url);
+      // For soft cached domains we use 'no-cors' to avoid CORS errors (at the expense of an opaque response).
+      const mode: RequestMode = isSoft ? 'no-cors' : 'cors';
+      matchRequest = new Request(requestArg.url, {
+        method: requestArg.method,
+        headers: requestArg.headers,
+        mode,
+        credentials: 'same-origin',
+        redirect: 'follow'
+      });
+    }
+    return matchRequest;
+  }
+
+  /**
+   * Creates a 500 error response.
+   */
+  private async create500Response(requestArg: Request, responseArg: Response): Promise<Response> {
+    return new Response(
+      `
+      <html>
+        <head>
+          <style>
+            .note {
+              padding: 10px;
+              color: #fff;
+              background: #000;
+              border-bottom: 1px solid #e4002b;
+              margin-bottom: 20px;
+            }
+          </style>
+        </head>
+        <body>
           <div class="note">
-            <strong>serviceworker running, but status 500</strong><br>
+            <strong>Service worker running, but status 500</strong><br>
           </div>
-          serviceworker is unable to fetch this request<br>
-          Here is some info about the request/response pair:<br>
-          <br>
-          requestUrl: ${requestArg.url}<br>
-          responseType: ${responseArg.type}<br>
-          responseBody: ${await responseArg.clone().text()}<br>
-          </body>
-        </html>
+          Service worker is unable to fetch this request.<br>
+          Request URL: ${requestArg.url}<br>
+          Response Type: ${responseArg.type}<br>
+          Response Body: ${await responseArg.clone().text()}<br>
+        </body>
+      </html>
       `,
-        {
-          headers: {
-            "Content-Type": "text/html"
-          },
-          status: 500
-        }
-      );
-    };
+      {
+        headers: { "Content-Type": "text/html" },
+        status: 500
+      }
+    );
+  }
 
-    // A list of local resources we always want to be cached.
+  /**
+   * Sets up the fetch event listener and caching logic.
+   */
+  private _setupCache = () => {
     this.losslessServiceWorkerRef.serviceWindowRef.addEventListener('fetch', async (fetchEventArg: any) => {
-      // Block scopes we don't want the serviceworker to handle.
       const originalRequest: Request = fetchEventArg.request;
       const parsedUrl = new URL(originalRequest.url);
+
+      // Exclude specific hosts or paths from being handled by the service worker.
       if (
         parsedUrl.hostname.includes('paddle.com') ||
         parsedUrl.hostname.includes('paypal.com') ||
@@ -92,29 +138,32 @@ export class CacheManager {
         parsedUrl.pathname.startsWith('/socket.io') ||
         originalRequest.url.startsWith('https://umami.')
       ) {
-        logger.log('note', `serviceworker not active for ${parsedUrl.toString()}`);
+        logger.log('note', `Service worker not active for ${parsedUrl.toString()}`);
         return;
       }
 
-      // Continue for the rest.
+      // Create a deferred response.
       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://unpkg.com') ||
-        originalRequest.url.includes('https://fonts.googleapis.com') ||
-        originalRequest.url.includes('https://fonts.gstatic.com')
-      ) {
-        // Check for updates asynchronously.
-        this.losslessServiceWorkerRef.updateManager.checkUpdate(this);
+      // Only handle GET requests for caching.
+      if (originalRequest.method === 'GET' && this.isCacheable(originalRequest.url)) {
+        // Determine if the browser is Safari.
+        const userAgent = (self.navigator && self.navigator.userAgent) || "";
+        const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
 
-        // Handle local or approved remote requests.
-        const matchRequest = createMatchRequest(originalRequest);
+        // For soft cached domains on Safari, bypass caching entirely.
+        if (this.isSoftCached(originalRequest.url) && isSafari) {
+          logger.log('info', `Safari detected – bypass caching for soft cached domain: ${originalRequest.url}`);
+          const networkResponse = await fetch(originalRequest).catch(async err => {
+            return await this.create500Response(originalRequest, new Response(err.message));
+          });
+          done.resolve(networkResponse);
+          return;
+        }
+
+        // Try to serve from cache.
+        const matchRequest = this.createMatchRequest(originalRequest);
         const cachedResponse = await caches.match(matchRequest);
         if (cachedResponse) {
           logger.log('ok', `CACHED: found cached response for ${matchRequest.url}`);
@@ -122,89 +171,96 @@ export class CacheManager {
           return;
         }
 
-        // No cached response found; try to fetch and cache.
-        logger.log('info', `NOTYETCACHED: trying to cache ${matchRequest.url}`);
+        logger.log('info', `NOTYETCACHED: fetching and caching ${matchRequest.url}`);
         const newResponse: Response = await fetch(matchRequest).catch(async err => {
-          return await create500Response(matchRequest, new Response(err.message));
+          return await this.create500Response(matchRequest, new Response(err.message));
         });
 
-        // If status > 299 or opaque response, don't cache.
-        if (newResponse.status > 299 || newResponse.type === 'opaque') {
-          logger.log(
-            'error',
-            `NOTCACHED: can't cache response for ${matchRequest.url} due to status ${
-              newResponse.status
-            } and type ${newResponse.type}`
-          );
-          done.resolve(await create500Response(matchRequest, newResponse));
-        } else {
-          const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
-          const responseToPutToCache = newResponse.clone();
+        // If the response status indicates an error, don't cache.
+        if (newResponse.status > 299) {
+          logger.log('error', `NOTCACHED: response for ${matchRequest.url} has status ${newResponse.status}`);
+          done.resolve(await this.create500Response(matchRequest, newResponse));
+          return;
+        }
 
-          // Create new headers preserving all except caching-related headers.
-          const headers = new Headers();
-          responseToPutToCache.headers.forEach((value, key) => {
-            if (![
-              'Cache-Control',
-              'cache-control',
-              'Expires',
-              'expires',
-              'Pragma',
-              'pragma'
-            ].includes(key)) {
-              headers.set(key, value);
-            }
-          });
+        // Handle opaque responses separately.
+        if (newResponse.type === 'opaque') {
+          // For soft-cached domains we expect opaque responses (from no-cors fetches).
+          if (this.isSoftCached(matchRequest.url)) {
+            const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
+            // Cache the opaque response as-is.
+            await cache.put(matchRequest, newResponse.clone());
+            logger.log('ok', `NOWCACHED: cached opaque response for ${matchRequest.url}`);
+            done.resolve(newResponse);
+            return;
+          } else {
+            // If an opaque response comes from a non-soft domain, treat it as an error.
+            logger.log('error', `NOTCACHED: opaque response received for non-soft domain ${matchRequest.url}`);
+            done.resolve(await this.create500Response(matchRequest, newResponse));
+            return;
+          }
+        }
 
-          // Ensure CORS headers are present in cached response.
-          if (!headers.has('Access-Control-Allow-Origin')) {
-            headers.set('Access-Control-Allow-Origin', '*');
+        // For non-opaque responses, adjust headers and cache.
+        const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
+        const responseToCache = newResponse.clone();
+        const headers = new Headers();
+        responseToCache.headers.forEach((value, key) => {
+          // Preserve all headers except caching-related ones.
+          if (!['Cache-Control', 'cache-control', 'Expires', 'expires', 'Pragma', 'pragma'].includes(key)) {
+            headers.set(key, value);
           }
-          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');
-          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,
+        // Ensure necessary CORS headers.
+        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');
+        headers.set('Surrogate-Control', 'no-store');
+
+        // Read the response body as a blob so we can create a new Response with modified headers.
+        let newCachedResponse: Response;
+        try {
+          const bodyBlob = await responseToCache.blob();
+          newCachedResponse = new Response(bodyBlob, {
+            status: responseToCache.status,
+            statusText: responseToCache.statusText,
             headers
           });
-          await cache.put(matchRequest, newCachedResponse);
-          logger.log('ok', `NOWCACHED: cached response for ${matchRequest.url} for subsequent requests!`);
-          done.resolve(newResponse);
+        } catch (err) {
+          newCachedResponse = newResponse;
         }
+
+        await cache.put(matchRequest, newCachedResponse);
+        logger.log('ok', `NOWCACHED: cached response for ${matchRequest.url}`);
+        done.resolve(newResponse);
       } else {
-        // For remote requests that don't qualify for caching.
-        logger.log(
-          'ok',
-          `NOTCACHED: not caching any responses for ${originalRequest.url}. Fetching from origin now...`
-        );
-        done.resolve(
-          await fetch(originalRequest).catch(async err => {
-            return await create500Response(originalRequest, new Response(err.message));
-          })
-        );
+        // For non-cacheable requests, fetch directly from the network.
+        logger.log('ok', `NOTCACHED: fetching ${originalRequest.url} from origin (non-cacheable)`);
+        const networkResponse = await fetch(originalRequest).catch(async err => {
+          return await this.create500Response(originalRequest, new Response(err.message));
+        });
+        done.resolve(networkResponse);
       }
     });
-  }
+  };
 
   /**
    * Cleans all caches.
-   * Should only be run when running a new service worker.
-   * @param reasonArg
+   * Should be run when a new service worker is activated.
+   * @param reasonArg A reason for the cache cleanup.
    */
-  public cleanCaches = async (reasonArg = 'no reason given') => {
+  public cleanCaches = async (reasonArg = 'no reason given'): Promise<void> => {
     logger.log('info', `MAJOR CACHEEVENT: cleaning caches now! Reason: ${reasonArg}`);
     const cacheNames = await caches.keys();
 
@@ -216,25 +272,21 @@ export class CacheManager {
       return deletePromise;
     });
     await Promise.all(deletePromises);
-  }
+  };
 
   /**
    * Revalidates the runtime cache.
    */
-  public async revalidateCache() {
+  public async revalidateCache(): Promise<void> {
     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);
-
-      // Fetch a new response for comparison.
       const clonedRequest = requestArg.clone();
-      const response = await plugins.smartpromise.timeoutWrap(fetch(clonedRequest), 5000); // Increased timeout for better mobile compatibility
+      const response = await plugins.smartpromise.timeoutWrap(fetch(clonedRequest), 5000);
       if (response && response.status >= 200 && response.status < 300) {
         await runtimeCache.delete(requestArg);
         await runtimeCache.put(requestArg, response);
       }
     }
   }
-}
+}