3.0.63

changelog.md

@@ -1,5 +1,64 @@
 # Changelog
 
+## 2025-02-04 - 3.0.63 - fix(core)
+Refactored caching strategy for service worker to improve compatibility and performance.
+
+- Removed hard and soft caching distinctions.
+- Simplified cache setup process.
+- Improved browser caching control headers.
+
+## 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
+
+- 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.
 

package.json

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

@@ -16,25 +16,29 @@ export class CacheManager {
   }
 
   private _setupCache = () => {
-    const createMatchRequest = (requestArg: Request) => {
-      // lets create a matchRequest
+    const createMatchRequest = (requestArg: Request): Request => {
+      // Create a matchRequest based on whether the request is internal or external.
       let matchRequest: Request;
       if (requestArg.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin)) {
-        // internal request
+        // Internal request; use the original.
         matchRequest = requestArg;
       } else {
+        // External request; create a new Request with appropriate 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 error response.
      */
-    const create500Response = async (requestArg: Request, responseArg: Response) => {
+    const create500Response = async (requestArg: Request, responseArg: Response): Promise<Response> => {
       return new Response(
         `
         <html>
@@ -50,16 +54,15 @@ export class CacheManager {
             </style>
           </head>
           <body>
-          
-          <div class="note">
-            <strong>serviceworker 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>
+            <div class="note">
+              <strong>serviceworker 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>
       `,
@@ -71,43 +74,41 @@ export class CacheManager {
         }
       );
     };
-  
-    // A list of local resources we always want to be cached.
+
+    // Listen for fetch events.
     this.losslessServiceWorkerRef.serviceWindowRef.addEventListener('fetch', async (fetchEventArg: any) => {
-      // Lets block scopes we don't want to be passing through the serviceworker
+      // Block specific scopes.
       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
+
+      // 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.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')
       ) {
-  
-        // 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
+
+        // Try to serve from cache.
         const matchRequest = createMatchRequest(originalRequest);
         const cachedResponse = await caches.match(matchRequest);
         if (cachedResponse) {
@@ -115,61 +116,69 @@ export class CacheManager {
           done.resolve(cachedResponse);
           return;
         }
-  
-        // in case there is no cached response
+
+        // In case there is no cached response, fetch from the network.
         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 the response status is an error or the response is opaque, do not cache it.
         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}`
+            `NOTCACHED: not caching response for ${matchRequest.url} due to status ${newResponse.status} and type ${newResponse.type}`
           );
-          done.resolve(await create500Response(matchRequest, newResponse));
+          // Simply return the network response without caching.
+          done.resolve(newResponse);
+          return;
         } else {
+          // Cache the response.
           const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
           const responseToPutToCache = newResponse.clone();
           const headers = new Headers();
           responseToPutToCache.headers.forEach((value, key) => {
-            if (
-              value !== 'Cache-Control'
-              && value !== 'cache-control'
-              && value !== 'Expires'
-              && value !== 'expires'
-              && value !== 'Pragma'
-              && value !== 'pragma'
-            ) {
+            // Preserve all headers except caching-related ones.
+            if (![
+              'Cache-Control',
+              'cache-control',
+              'Expires',
+              'expires',
+              'Pragma',
+              'pragma'
+            ].includes(key)) {
               headers.set(key, value);
             }
           });
-          // Prevent browser caching while allowing service worker caching
+
+          // Ensure CORS headers are present.
+          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');
+
           await cache.put(matchRequest, new Response(responseToPutToCache.body, {
             ...responseToPutToCache,
             headers
           }));
-          logger.log(
-            'ok',
-            `NOWCACHED: cached response for ${matchRequest.url} for subsequent requests!`
-          );
+          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 not intended for caching, fetch directly from the origin.
         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,39 +190,31 @@ export class CacheManager {
   }
 
   /**
-   * update caches
-   * @param reasonArg
-   */
-
-  /**
-   * cleans all caches
-   * should only be run when running a new service worker
-   * @param reasonArg
+   * Cleans all caches.
+   * Should only be run when a new service worker is activated.
    */
   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) {
-      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), 5000); // Increased timeout for better mobile compatibility
       if (response && response.status >= 200 && response.status < 300) {
@@ -222,4 +223,4 @@ export class CacheManager {
       }
     }
   }
-}
+}