@soham20/smart-offline-sdk 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soham20/smart-offline-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Smart offline-first JavaScript SDK with intelligent caching for web applications",
   "main": "./src/index.cjs",
   "module": "./src/index.js",

package/smart-offline-sw.js

@@ -20,6 +20,141 @@ let SDK_CONFIG = {
   enableDetailedLogs: false
 };
 
+/**
+ * -------- CONSOLE LOGGING UTILITIES --------
+ * Rich, colorful debug logs for caching activity
+ */
+const LOG_STYLES = {
+  banner: 'background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: white; font-size: 14px; padding: 8px 16px; border-radius: 4px; font-weight: bold;',
+  cached: 'background: #10B981; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;',
+  skipped: 'background: #F59E0B; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;',
+  served: 'background: #3B82F6; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;',
+  error: 'background: #EF4444; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;',
+  intercept: 'background: #8B5CF6; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;',
+  url: 'color: #6366F1; font-weight: bold;',
+  reason: 'color: #059669; font-style: italic;',
+  metadata: 'color: #6B7280;',
+  priority_high: 'background: #DC2626; color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px;',
+  priority_normal: 'background: #9CA3AF; color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px;',
+  type_api: 'background: #7C3AED; color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px;',
+  type_page: 'background: #2563EB; color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px;'
+};
+
+function formatBytes(bytes) {
+  if (bytes === 0 || !bytes) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function formatTimestamp(ts) {
+  return new Date(ts).toLocaleTimeString();
+}
+
+/**
+ * Print rich cache log to console
+ */
+function printCacheLog(action, url, reason, details = {}) {
+  if (!SDK_CONFIG.debug) return;
+
+  const time = formatTimestamp(Date.now());
+  const shortUrl = url.length > 60 ? url.substring(0, 57) + '...' : url;
+
+  switch (action) {
+    case 'CACHED':
+      console.groupCollapsed(
+        `%c💾 CACHED %c${shortUrl}`,
+        LOG_STYLES.cached,
+        LOG_STYLES.url
+      );
+      console.log(`%c⏰ Time: %c${time}`, 'font-weight: bold;', 'color: #6B7280;');
+      console.log(`%c📍 URL: %c${url}`, 'font-weight: bold;', LOG_STYLES.url);
+      console.log(`%c📝 Reason: %c${reason}`, 'font-weight: bold;', LOG_STYLES.reason);
+      if (details.type) {
+        console.log(`%c📦 Type: %c${details.type}`, 'font-weight: bold;', details.type === 'API' ? LOG_STYLES.type_api : LOG_STYLES.type_page);
+      }
+      if (details.priority) {
+        console.log(`%c⚡ Priority: %c${details.priority.toUpperCase()}`, 'font-weight: bold;', details.priority === 'high' ? LOG_STYLES.priority_high : LOG_STYLES.priority_normal);
+      }
+      if (details.size) {
+        console.log(`%c📊 Size: %c${formatBytes(details.size)}`, 'font-weight: bold;', 'color: #6B7280;');
+      }
+      if (details.usage) {
+        console.log(`%c📈 Usage Stats:`, 'font-weight: bold;', details.usage);
+      }
+      console.log('%c✅ Object cached successfully', 'color: #10B981; font-weight: bold;');
+      console.groupEnd();
+      break;
+
+    case 'SKIPPED':
+      console.groupCollapsed(
+        `%c⏭️ SKIPPED %c${shortUrl}`,
+        LOG_STYLES.skipped,
+        LOG_STYLES.url
+      );
+      console.log(`%c⏰ Time: %c${time}`, 'font-weight: bold;', 'color: #6B7280;');
+      console.log(`%c📍 URL: %c${url}`, 'font-weight: bold;', LOG_STYLES.url);
+      console.log(`%c🚫 Reason: %c${reason}`, 'font-weight: bold;', 'color: #F59E0B; font-weight: bold;');
+      if (details.size && details.limit) {
+        console.log(`%c📊 Size: %c${formatBytes(details.size)} (limit: ${formatBytes(details.limit)})`, 'font-weight: bold;', 'color: #EF4444;');
+      }
+      if (details.networkQuality) {
+        console.log(`%c🌐 Network: %c${details.networkQuality}`, 'font-weight: bold;', 'color: #6B7280;');
+      }
+      if (details.priority) {
+        console.log(`%c⚡ Priority: %c${details.priority.toUpperCase()}`, 'font-weight: bold;', details.priority === 'high' ? LOG_STYLES.priority_high : LOG_STYLES.priority_normal);
+      }
+      console.log('%c⚠️ Object NOT cached', 'color: #F59E0B; font-weight: bold;');
+      console.groupEnd();
+      break;
+
+    case 'SERVED':
+      console.groupCollapsed(
+        `%c📤 SERVED FROM CACHE %c${shortUrl}`,
+        LOG_STYLES.served,
+        LOG_STYLES.url
+      );
+      console.log(`%c⏰ Time: %c${time}`, 'font-weight: bold;', 'color: #6B7280;');
+      console.log(`%c📍 URL: %c${url}`, 'font-weight: bold;', LOG_STYLES.url);
+      console.log(`%c📝 Reason: %c${reason}`, 'font-weight: bold;', LOG_STYLES.reason);
+      if (details.priority) {
+        console.log(`%c⚡ Priority: %c${details.priority.toUpperCase()}`, 'font-weight: bold;', details.priority === 'high' ? LOG_STYLES.priority_high : LOG_STYLES.priority_normal);
+      }
+      if (details.usage) {
+        console.log(`%c📈 Usage Stats:`, 'font-weight: bold;', details.usage);
+      }
+      console.log('%c🔄 Served from offline cache', 'color: #3B82F6; font-weight: bold;');
+      console.groupEnd();
+      break;
+
+    case 'ERROR':
+      console.groupCollapsed(
+        `%c❌ CACHE MISS %c${shortUrl}`,
+        LOG_STYLES.error,
+        LOG_STYLES.url
+      );
+      console.log(`%c⏰ Time: %c${time}`, 'font-weight: bold;', 'color: #6B7280;');
+      console.log(`%c📍 URL: %c${url}`, 'font-weight: bold;', LOG_STYLES.url);
+      console.log(`%c🚫 Reason: %c${reason}`, 'font-weight: bold;', 'color: #EF4444; font-weight: bold;');
+      if (details.priority) {
+        console.log(`%c⚡ Priority: %c${details.priority.toUpperCase()}`, 'font-weight: bold;', details.priority === 'high' ? LOG_STYLES.priority_high : LOG_STYLES.priority_normal);
+      }
+      console.log('%c❌ Resource not available offline', 'color: #EF4444; font-weight: bold;');
+      console.groupEnd();
+      break;
+
+    case 'INTERCEPT':
+      console.log(
+        `%c🔍 INTERCEPT %c${shortUrl} %c[${details.isAPI ? 'API' : 'PAGE'}]`,
+        LOG_STYLES.intercept,
+        LOG_STYLES.url,
+        details.isAPI ? LOG_STYLES.type_api : LOG_STYLES.type_page
+      );
+      break;
+  }
+}
+
 /**
  * Receive config from SDK
  */
@@ -44,9 +179,27 @@ self.addEventListener("message", (event) => {
 });
 
 /**
- * Log cache events to IndexedDB
+ * Log cache events to IndexedDB and send to main thread
  */
 function logEvent(type, url, reason, metadata = {}) {
+  const eventData = {
+    type: `CACHE_${type.toUpperCase()}`,
+    url,
+    reason,
+    metadata,
+    timestamp: Date.now()
+  };
+
+  // Always send to main thread when debug or enableDetailedLogs is on
+  if (SDK_CONFIG.debug || SDK_CONFIG.enableDetailedLogs) {
+    self.clients.matchAll().then(clients => {
+      clients.forEach(client => {
+        client.postMessage(eventData);
+      });
+    });
+  }
+
+  // Store in IndexedDB only if enableDetailedLogs is on
   if (!SDK_CONFIG.enableDetailedLogs) return;
 
   const request = indexedDB.open("smart-offline-logs", 1);
@@ -72,19 +225,6 @@ function logEvent(type, url, reason, metadata = {}) {
       date: new Date().toISOString()
     });
   };
-
-  // Also send to main thread
-  self.clients.matchAll().then(clients => {
-    clients.forEach(client => {
-      client.postMessage({
-        type: `CACHE_${type.toUpperCase()}`,
-        url,
-        reason,
-        metadata,
-        timestamp: Date.now()
-      });
-    });
-  });
 }
 
 /**
@@ -250,9 +390,8 @@ self.addEventListener("fetch", (event) => {
 
   if (!isPage && !isAPI) return;
 
-  if (SDK_CONFIG.debug) {
-    console.log("[SW] Intercepted:", request.url);
-  }
+  // Log interception event
+  printCacheLog('INTERCEPT', request.url, 'URL pattern matched', { isPage, isAPI });
 
   event.respondWith(
     fetch(request)
@@ -269,12 +408,11 @@ self.addEventListener("fetch", (event) => {
             limit: SDK_CONFIG.maxResourceSize 
           });
           
-          if (SDK_CONFIG.debug) {
-            console.log(
-              `[SmartOffline] Skipped caching (size ${size} > ${SDK_CONFIG.maxResourceSize}):`,
-              request.url
-            );
-          }
+          printCacheLog('SKIPPED', request.url, 'Resource too large (exceeds maxResourceSize)', {
+            size,
+            limit: SDK_CONFIG.maxResourceSize
+          });
+          
           return response;
         }
 
@@ -289,12 +427,11 @@ self.addEventListener("fetch", (event) => {
             priority: 'low'
           });
           
-          if (SDK_CONFIG.debug) {
-            console.log(
-              `[SmartOffline] Skipped caching (slow network, not high priority):`,
-              request.url
-            );
-          }
+          printCacheLog('SKIPPED', request.url, 'Slow network detected - skipping low priority resource', {
+            networkQuality: netQuality,
+            priority: 'low'
+          });
+          
           return response;
         }
 
@@ -308,12 +445,13 @@ self.addEventListener("fetch", (event) => {
           });
         });
 
-        if (SDK_CONFIG.debug) {
-          console.log(
-            `[SmartOffline] Cached ${isAPI ? "API" : "PAGE"}:`,
-            request.url
-          );
-        }
+        // Rich console log for successful cache
+        printCacheLog('CACHED', request.url, 'Successfully fetched from network and cached', {
+          type: isAPI ? 'API' : 'PAGE',
+          size,
+          priority: highPriority ? 'high' : 'normal',
+          usage: usage ? { accessCount: usage.count, lastAccessed: new Date(usage.lastAccessed).toLocaleString() } : { accessCount: 1, lastAccessed: 'Now (first access)' }
+        });
 
         return response;
       })
@@ -331,16 +469,18 @@ self.addEventListener("fetch", (event) => {
             usage: usage ? { count: usage.count, lastAccessed: usage.lastAccessed } : null
           });
 
-          if (SDK_CONFIG.debug) {
-            console.log(
-              `[SmartOffline] Served from cache (${highPriority ? "HIGH" : "NORMAL"} priority):`,
-              request.url
-            );
-          }
+          printCacheLog('SERVED', request.url, 'Network unavailable - serving from cache', {
+            priority: highPriority ? 'high' : 'normal',
+            usage: usage ? { accessCount: usage.count, lastAccessed: new Date(usage.lastAccessed).toLocaleString() } : null
+          });
         } else {
           logEvent('error', request.url, 'cache_miss_offline', {
             priority: highPriority ? 'high' : 'normal'
           });
+
+          printCacheLog('ERROR', request.url, 'Network unavailable and resource not in cache', {
+            priority: highPriority ? 'high' : 'normal'
+          });
         }
 
         return cached;

package/src/index.js

@@ -92,7 +92,8 @@ export async function setupSmartOffline(config = {}) {
   try {
     // Register service worker
     if (currentConfig.debug) {
-      console.log("[SmartOffline] Registering service worker...");
+      printStartupBanner();
+      console.log("%c🔧 Registering service worker...", "color: #94a3b8;");
     }
 
     serviceWorkerRegistration = await navigator.serviceWorker.register(
@@ -102,8 +103,8 @@ export async function setupSmartOffline(config = {}) {
 
     if (currentConfig.debug) {
       console.log(
-        "[SmartOffline] Service worker registered:",
-        serviceWorkerRegistration.scope,
+        "%c✓ Service worker registered", "color: #22c55e;",
+        `(scope: ${serviceWorkerRegistration.scope})`
       );
     }
 
@@ -111,7 +112,7 @@ export async function setupSmartOffline(config = {}) {
     await navigator.serviceWorker.ready;
 
     if (currentConfig.debug) {
-      console.log("[SmartOffline] Service worker ready");
+      console.log("%c✓ Service worker ready", "color: #22c55e;");
     }
 
     // Send configuration to service worker
@@ -123,12 +124,7 @@ export async function setupSmartOffline(config = {}) {
     isInitialized = true;
 
     if (currentConfig.debug) {
-      console.log("[SmartOffline] Setup complete! Configuration:", {
-        pages: currentConfig.pages,
-        apis: currentConfig.apis,
-        frequencyThreshold: currentConfig.frequencyThreshold,
-        recencyThreshold: `${currentConfig.recencyThreshold / (60 * 60 * 1000)}h`,
-      });
+      printConfigSummary();
     }
 
     return { success: true, registration: serviceWorkerRegistration };
@@ -145,6 +141,108 @@ export async function setupSmartOffline(config = {}) {
 // HELPER FUNCTIONS
 // ============================================================================
 
+/**
+ * Print startup banner
+ */
+function printStartupBanner() {
+  console.log(
+    `%c
+╔═══════════════════════════════════════════════════════════╗
+║                                                           ║
+║   🚀 SmartOffline SDK v1.0.0                              ║
+║   Intelligent offline-first caching                       ║
+║                                                           ║
+╚═══════════════════════════════════════════════════════════╝
+`,
+    "color: #3b82f6; font-weight: bold;"
+  );
+}
+
+/**
+ * Print configuration summary
+ */
+function printConfigSummary() {
+  console.log(
+    `%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+    "color: #475569;"
+  );
+  console.log(
+    `%c📋 Configuration Summary`,
+    "color: #22c55e; font-weight: bold; font-size: 14px;"
+  );
+  console.log(
+    `%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+    "color: #475569;"
+  );
+
+  // Pages
+  console.log("%c📄 Pages to cache:", "color: #60a5fa; font-weight: bold;");
+  if (currentConfig.pages.length > 0) {
+    currentConfig.pages.forEach((p) =>
+      console.log(`   %c• ${p}`, "color: #94a3b8;")
+    );
+  } else {
+    console.log("   %c(none)", "color: #64748b; font-style: italic;");
+  }
+
+  // APIs
+  console.log("%c🔌 APIs to cache:", "color: #60a5fa; font-weight: bold;");
+  if (currentConfig.apis.length > 0) {
+    currentConfig.apis.forEach((a) =>
+      console.log(`   %c• ${a}`, "color: #94a3b8;")
+    );
+  } else {
+    console.log("   %c(none)", "color: #64748b; font-style: italic;");
+  }
+
+  // Priority settings
+  console.log("%c⚡ Priority settings:", "color: #60a5fa; font-weight: bold;");
+  console.log(
+    `   %cFrequency threshold: ${currentConfig.frequencyThreshold} accesses`,
+    "color: #94a3b8;"
+  );
+  console.log(
+    `   %cRecency threshold: ${currentConfig.recencyThreshold / (60 * 60 * 1000)}h`,
+    "color: #94a3b8;"
+  );
+  console.log(
+    `   %cMax resource size: ${formatBytes(currentConfig.maxResourceSize)}`,
+    "color: #94a3b8;"
+  );
+  console.log(
+    `   %cNetwork quality: ${currentConfig.networkQuality}`,
+    "color: #94a3b8;"
+  );
+
+  // Significance overrides
+  const sigKeys = Object.keys(currentConfig.significance || {});
+  if (sigKeys.length > 0) {
+    console.log(
+      "%c🎯 Significance overrides:",
+      "color: #60a5fa; font-weight: bold;"
+    );
+    sigKeys.forEach((key) => {
+      const val = currentConfig.significance[key];
+      const icon = val === "high" ? "🔴" : val === "low" ? "🔵" : "⚪";
+      console.log(`   %c${icon} ${key} → ${val}`, "color: #94a3b8;");
+    });
+  }
+
+  console.log(
+    `%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+    "color: #475569;"
+  );
+  console.log(
+    "%c✅ SmartOffline is now active! Cache events will appear below.",
+    "color: #22c55e; font-weight: bold;"
+  );
+  console.log(
+    `%c━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+    "color: #475569;"
+  );
+  console.log(""); // Empty line for spacing
+}
+
 async function sendConfigToServiceWorker() {
   const controller = navigator.serviceWorker.controller;
 
@@ -202,29 +300,134 @@ function setupEventListenersInternal() {
         const listeners = eventListeners[eventType] || [];
         listeners.forEach((fn) => fn(cacheEvent));
 
-        // Debug logging
+        // Rich debug logging with colors
         if (currentConfig.debug) {
-          const icon = {
-            CACHE_CACHE: "💾",
-            CACHE_SKIP: "⏭️",
-            CACHE_SERVE: "📤",
-            CACHE_ERROR: "❌",
-          };
-
-          console.log(
-            `[SmartOffline] ${icon[cacheEvent.type] || "📝"} ${cacheEvent.type.replace("CACHE_", "")}:`,
-            cacheEvent.url.replace(
-              typeof window !== "undefined" ? window.location.origin : "",
-              "",
-            ),
-            `(${cacheEvent.reason})`,
-          );
+          logCacheEventToConsole(cacheEvent);
         }
       }
     }
   });
 }
 
+/**
+ * Rich console logging for cache events with colors and formatting
+ */
+function logCacheEventToConsole(cacheEvent) {
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const shortUrl = cacheEvent.url.replace(origin, "") || cacheEvent.url;
+  const time = new Date(cacheEvent.timestamp).toLocaleTimeString();
+  
+  // Style configurations for each event type
+  const styles = {
+    CACHE_INTERCEPT: {
+      icon: "🔍",
+      label: "INTERCEPT",
+      bgColor: "#6366f1",
+      textColor: "#fff",
+    },
+    CACHE_CACHE: {
+      icon: "💾",
+      label: "CACHED",
+      bgColor: "#22c55e",
+      textColor: "#fff",
+    },
+    CACHE_SKIP: {
+      icon: "⏭️",
+      label: "SKIPPED",
+      bgColor: "#f59e0b",
+      textColor: "#000",
+    },
+    CACHE_SERVE: {
+      icon: "📤",
+      label: "SERVED",
+      bgColor: "#3b82f6",
+      textColor: "#fff",
+    },
+    CACHE_ERROR: {
+      icon: "❌",
+      label: "MISS",
+      bgColor: "#ef4444",
+      textColor: "#fff",
+    },
+  };
+
+  const style = styles[cacheEvent.type] || {
+    icon: "📝",
+    label: "EVENT",
+    bgColor: "#64748b",
+    textColor: "#fff",
+  };
+
+  // Build metadata string
+  let metaInfo = "";
+  if (cacheEvent.metadata) {
+    const meta = cacheEvent.metadata;
+    const parts = [];
+    if (meta.type) parts.push(`type: ${meta.type}`);
+    if (meta.priority) parts.push(`priority: ${meta.priority}`);
+    if (meta.size) parts.push(`size: ${formatBytes(meta.size)}`);
+    if (meta.networkQuality) parts.push(`network: ${meta.networkQuality}`);
+    if (meta.isPage !== undefined) parts.push(meta.isPage ? "PAGE" : "API");
+    if (parts.length > 0) metaInfo = ` [${parts.join(", ")}]`;
+  }
+
+  // Reason badge
+  const reasonText = cacheEvent.reason ? ` → ${formatReason(cacheEvent.reason)}` : "";
+
+  // Log with styling
+  console.log(
+    `%c ${style.icon} SmartOffline %c ${style.label} %c ${time} %c ${shortUrl}${reasonText}${metaInfo}`,
+    `background: #1e293b; color: #fff; padding: 2px 6px; border-radius: 3px 0 0 3px; font-weight: bold;`,
+    `background: ${style.bgColor}; color: ${style.textColor}; padding: 2px 8px; font-weight: bold;`,
+    `background: #334155; color: #94a3b8; padding: 2px 6px;`,
+    `background: transparent; color: #e2e8f0; padding: 2px 6px;`
+  );
+
+  // For cached items, show additional details in a group
+  if (cacheEvent.type === "CACHE_CACHE" && cacheEvent.metadata) {
+    console.groupCollapsed(`   ↳ Details for ${shortUrl}`);
+    console.table({
+      URL: shortUrl,
+      Type: cacheEvent.metadata.type || "unknown",
+      Priority: cacheEvent.metadata.priority || "normal",
+      Size: cacheEvent.metadata.size ? formatBytes(cacheEvent.metadata.size) : "unknown",
+      Timestamp: new Date(cacheEvent.timestamp).toISOString(),
+    });
+    console.groupEnd();
+  }
+
+  // For serve events, show usage data if available
+  if (cacheEvent.type === "CACHE_SERVE" && cacheEvent.metadata?.usage) {
+    console.groupCollapsed(`   ↳ Usage data for ${shortUrl}`);
+    console.table({
+      "Access Count": cacheEvent.metadata.usage.count,
+      "Last Accessed": new Date(cacheEvent.metadata.usage.lastAccessed).toISOString(),
+      Priority: cacheEvent.metadata.priority || "normal",
+    });
+    console.groupEnd();
+  }
+}
+
+/**
+ * Format bytes to human readable string
+ */
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+/**
+ * Format reason string to be more readable
+ */
+function formatReason(reason) {
+  return reason
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
 function openDB(name, version) {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(name, version);