update sw

public/sw.js

@@ -1,34 +1,40 @@
-// A name for our cache, change this every time you update the app shell
-const CACHE_NAME = 'timetracker-v2';
+const CACHE_NAME = 'timetracker-v3'; // Update this if you change anything!
 
-// The files that make up the "app shell"
+// Cache only local assets here. Avoid opaque external resources in addAll().
 const urlsToCache = [
   '/',
   '/index.html',
+  '/manifest.json'
+  // Add local JS/CSS files here if you have them, e.g., '/main.js', '/styles.css'
 ];
 
-// 1. Installation: Open the cache and add the app shell files.
+// Install: Cache core files
 self.addEventListener('install', (event) => {
+  console.log('[SW] Install event');
+
   event.waitUntil(
     caches.open(CACHE_NAME)
-      .then((cache) => {
-        console.log('Opened cache and added app shell');
+      .then(cache => {
+        console.log('[SW] Caching app shell:', urlsToCache);
         return cache.addAll(urlsToCache);
       })
+      .catch(err => {
+        console.error('[SW] Install cache error:', err);
+      })
   );
 });
 
-// 2. Activation: Clean up old caches. (NEW)
-// This event fires after install and when the new service worker takes control.
+// Activate: Clean up old caches
 self.addEventListener('activate', (event) => {
+  console.log('[SW] Activate event');
+
   event.waitUntil(
-    caches.keys().then((cacheNames) => {
+    caches.keys().then(cacheNames => {
       return Promise.all(
-        cacheNames.map((cacheName) => {
-          // If a cache is not the current one, delete it.
-          if (cacheName !== CACHE_NAME) {
-            console.log('Deleting old cache:', cacheName);
-            return caches.delete(cacheName);
+        cacheNames.map(name => {
+          if (name !== CACHE_NAME) {
+            console.log('[SW] Deleting old cache:', name);
+            return caches.delete(name);
           }
         })
       );
@@ -36,33 +42,39 @@ self.addEventListener('activate', (event) => {
   );
 });
 
-// 3. Fetch: Serve from cache, fallback to network, and cache new requests. (IMPROVED)
+// Fetch: Cache-first strategy with dynamic caching
 self.addEventListener('fetch', (event) => {
-  // We only want to cache GET requests
-  if (event.request.method !== 'GET') {
-    return;
-  }
-  
+  if (event.request.method !== 'GET') return;
+
+  console.log('[SW] Fetch request:', event.request.url);
+
   event.respondWith(
     caches.match(event.request)
-      .then((cachedResponse) => {
-        // If the response is in the cache, return it.
+      .then(cachedResponse => {
         if (cachedResponse) {
+          console.log('[SW] Serving from cache:', event.request.url);
           return cachedResponse;
         }
 
-        // If not in cache, go to the network.
-        return fetch(event.request).then((networkResponse) => {
-          // If the network request is successful, cache it for next time.
-          if (networkResponse && networkResponse.status === 200) {
-            const responseToCache = networkResponse.clone(); // Clone the response
-            caches.open(CACHE_NAME)
-              .then((cache) => {
+        return fetch(event.request)
+          .then(networkResponse => {
+            if (
+              networkResponse &&
+              networkResponse.status === 200 &&
+              networkResponse.type !== 'opaque'
+            ) {
+              const responseToCache = networkResponse.clone();
+              caches.open(CACHE_NAME).then(cache => {
+                console.log('[SW] Dynamically caching:', event.request.url);
                 cache.put(event.request, responseToCache);
               });
-          }
-          return networkResponse;
-        });
+            }
+            return networkResponse;
+          })
+          .catch(err => {
+            console.error('[SW] Network request failed:', event.request.url, err);
+            // Optionally, return a fallback page or image here
+          });
       })
   );
-});
+});