update sw

Author: gigamaster

README.md

@@ -29,17 +29,20 @@ A versatile collection of web apps designed for developers and creatives on the
 
 <table>
 <tr><th width="30%">Web App</th><th>Description</th></tr>
+<tr><td width="30%"><img src="app/web-app/ai-chatbot.jpg" width="30%" height="auto" alt="AI-chatbot"></td><td>AI-chatbot<br>AI chatbot with local storage full-featured for Codemo</th></tr>
 <tr><td width="30%"><img src="app/web-app/dpaint.webp" width="30%" height="auto" alt="dpaint"></td><td>dpaint<br>Image editor modeled after the legendary Deluxe</td></tr>
-<tr><td width="30%"><img src="app/web-app/drawio.webp" width="30%" height="auto" alt="dpaint"></td><td>drawio<br>Diagram editor or whiteboard by JGraph Ltd and draw.io AG</th></tr>
-<tr><td width="30%"><img src="app/web-app/encrypt.webp" width="30%" height="auto" alt="dpaint"></td><td>encrypt<br>Static HTML Encryption for public host</th></tr>
-<tr><td width="30%"><img src="app/web-app/erd-editor.webp" width="30%" height="auto" alt="dpaint"></td><td>erd-editor<br>Entity-Relationship Diagram Editor by SeungHwan-Lee @dineug</th></tr>
-<tr><td width="30%"><img src="app/web-app/godsvg.webp" width="30%" height="auto" alt="dpaint"></td><td>godsvg<br>Editor for Scalable Vector Graphics (SVG) by @MewPurPur</th></tr>
-<tr><td width="30%"><img src="app/web-app/grapesjs.webp" width="30%" height="auto" alt="dpaint"></td><td>grapesjs<br>WYSIWYG eeb page builder</th></tr>
-<tr><td width="30%"><img src="app/web-app/livecodes.webp" width="30%" height="auto" alt="dpaint"></td><td>livecodes<br>Live code playground</th></tr>
-<tr><td width="30%"><img src="app/web-app/mermaid.webp" width="30%" height="auto" alt="dpaint"></td><td>mermaid<br>Charts and diagrams editor</th></tr>
-<tr><td width="30%"><img src="app/web-app/tldraw.webp" width="30%" height="auto" alt="dpaint"></td><td>tldraw<br>Canvas and whiteboard draw</th></tr>
-<tr><td width="30%"><img src="app/web-app/voxel-builder.webp" width="30%" height="auto" alt="dpaint"></td><td>voxel-builder<br>Voxel-based 3D Modeling Application  nimadez</th></tr>
-<tr><td width="30%"><img src="app/web-app/vvvebjs.webp" width="30%" height="auto" alt="dpaint"></td><td>vvvebjs<br>Drag and drop web page builder givanz</th></tr>
+<tr><td width="30%"><img src="app/web-app/drawio.webp" width="30%" height="auto" alt="drawio"></td><td>drawio<br>Diagram editor or whiteboard by JGraph Ltd and draw.io AG</th></tr>
+<tr><td width="30%"><img src="app/web-app/encrypt.webp" width="30%" height="auto" alt="encrypt"></td><td>encrypt<br>Static HTML Encryption for public host</th></tr>
+<tr><td width="30%"><img src="app/web-app/erp-editor.webp" width="30%" height="auto" alt="erd-editor"></td><td>erd-editor<br>Entity-Relationship Diagram Editor by SeungHwan-Lee @dineug</th></tr>
+<tr><td width="30%"><img src="app/web-app/grapesjs.webp" width="30%" height="auto" alt="grapesjs"></td><td>grapesjs<br>WYSIWYG eeb page builder</th></tr>
+<tr><td width="30%"><img src="app/web-app/image-converter.webp" width="30%" height="auto" alt="Image Converter"></td><td>Image Converter<br>Powered by web workers & jSquash image codecs</th></tr>
+<tr><td width="30%"><img src="app/web-app/image-optimize.webp" width="30%" height="auto" alt="Image Optimize"></td><td>Image Optimize<br>Optimize images using best-in-class codecs, right in the browser</th></tr>
+<tr><td width="30%"><img src="app/web-app/livecodes.webp" width="30%" height="auto" alt="livecodes"></td><td>livecodes<br>Live code playground</th></tr>
+<tr><td width="30%"><img src="app/web-app/mermaid.webp" width="30%" height="auto" alt="mermaid"></td><td>mermaid<br>Charts and diagrams editor</th></tr>
+<tr><td width="30%"><img src="app/web-app/social-media-agent.webp" width="30%" height="auto" alt="social-media"></td><td>social-media<br>Generate optimized content for all your social media platforms in one click</th></tr>
+<tr><td width="30%"><img src="app/web-app/tldraw.webp" width="30%" height="auto" alt="tldraw"></td><td>tldraw<br>Canvas and whiteboard draw</th></tr>
+<tr><td width="30%"><img src="app/web-app/voxel-builder.webp" width="30%" height="auto" alt="voxel-builder"></td><td>voxel-builder<br>Voxel-based 3D Modeling Application  nimadez</th></tr>
+<tr><td width="30%"><img src="app/web-app/vvveb.webp" width="30%" height="auto" alt="vvvebjs"></td><td>vvvebjs<br>Drag and drop web page builder givanz</th></tr>
 </table>
 
 

app/service-worker.js

@@ -22,9 +22,56 @@ const routes = [
   '/codemo/tools/notes/',
 ];
 
-// combine static files and routes to cache
+// exclude routes (use deployment paths). Use trailing '*' to indicate "prefix"
+const excludedRoutes = [
+  '/codemo/web-app/*',
+  '/codemo/web-app/',
+  '/web-app/*',
+];
+
+// helper: simple pattern matching supporting trailing '*' as a prefix wildcard
+const routeMatchesPattern = (pattern, pathname) => {
+  if (!pattern) return false;
+  const p = pattern.startsWith('/') ? pattern : '/' + pattern;
+  const path = pathname.startsWith('/') ? pathname : '/' + pathname;
+
+  if (p.endsWith('*')) {
+    const prefix = p.slice(0, -1);
+    return path.startsWith(prefix);
+  }
+  return path === p;
+};
+
+// flexible route exclusion checker:
+// - accepts full URL string (request.url), a Request, or a pathname
+// - uses prefix matching for patterns that end with '*'
+const isRouteExcluded = (input) => {
+  let pathname;
+  try {
+    if (typeof input === 'string') {
+      // could be full URL or pathname
+      pathname = (new URL(input, self.location.href)).pathname;
+    }
+    else if (input && typeof input.url === 'string') {
+      pathname = (new URL(input.url, self.location.href)).pathname;
+    }
+    else if (input && typeof input.pathname === 'string') {
+      pathname = input.pathname;
+    }
+    else {
+      return false;
+    }
+  } catch (e) {
+    // fallback: if parsing fails, do not exclude
+    return false;
+  }
+
+  return excludedRoutes.some(pattern => routeMatchesPattern(pattern, pathname));
+};
+
+// combine static files and routes to cache (filter using matcher)
 const filesToCache = [
-  ...routes,
+  ...routes.filter(route => !isRouteExcluded(route)),
   ...staticFiles,
 ];
 
@@ -44,6 +91,9 @@ const IDBConfig = {
 // returns if the app is offline
 const isOffline = () => !self.navigator.onLine;
 
+// (isRouteExcluded defined earlier above filesToCache)
+// The exclusion matcher is implemented above and used for both install and fetch-time checks.
+
 // return if a request should be retried when offline, in this example, all POST, PUT, DELETE requests
 // and requests that are listed in the requestsToRetryWhenOffline array
 // you can adapt this function to your specific needs
@@ -265,13 +315,19 @@ const fetchHandler = async e => {
   e.respondWith(
     (async () => {
       try {
+
+        // check if the current route is excluded from caching and handling
+        if (isRouteExcluded(request.url)) {
+          return fetch(request);
+        }
+
         // store requests to IndexedDB that are eligible for retry when offline and return the offline page
         // as response so no error is logged
         if(isOffline() && isRequestEligibleForRetry(request)) {
           console.log('storing request', request);
           await storeRequest(request);
 
-          return await caches.match('/offline.html');
+          return await caches.match('/codemo/asset/offline.html');
         }
 
         // try to get the response from the cache
@@ -287,8 +343,8 @@ const fetchHandler = async e => {
         }
       }
       catch(err) {
-        // a fetch error occurred, serve the offline page since we don't have a cached response
-        return await caches.match('/offline.html');
+  // a fetch error occurred, serve the offline page since we don't have a cached response
+  return await caches.match('/codemo/asset/offline.html');
       }
     })()
   );