feat: lists

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'linkding-v1';
+const CACHE_NAME = 'linkding-v2';
 const urlsToCache = [
   '/',
   '/index.html',
@@ -36,12 +36,14 @@ self.addEventListener('activate', (event) => {
           }
         })
       );
+    }).then(() => {
+      // Claim all clients immediately to ensure new service worker takes control
+      return self.clients.claim();
     })
   );
-  return self.clients.claim();
 });
 
-// Fetch event - serve from cache, fallback to network
+// Fetch event - network first for HTML/CSS/JS, cache first for images
 self.addEventListener('fetch', (event) => {
   // API requests - always fetch from network, don't cache
   if (event.request.url.includes('/api/')) {
@@ -49,12 +51,17 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // Static assets - cache first, then network
-  event.respondWith(
-    caches.match(event.request)
-      .then((response) => {
-        // Return cached version or fetch from network
-        return response || fetch(event.request).then((response) => {
+  const url = new URL(event.request.url);
+  const isHTML = event.request.destination === 'document' || url.pathname === '/' || url.pathname.endsWith('.html');
+  const isCSS = url.pathname.endsWith('.css');
+  const isJS = url.pathname.endsWith('.js');
+  const isImage = event.request.destination === 'image' || url.pathname.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/i);
+
+  // For HTML, CSS, and JS: Network first, then cache (for offline support)
+  if (isHTML || isCSS || isJS) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
           // Don't cache non-successful responses
           if (!response || response.status !== 200 || response.type !== 'basic') {
             return response;
@@ -69,14 +76,55 @@ self.addEventListener('fetch', (event) => {
             });
 
           return response;
-        });
-      })
-      .catch(() => {
-        // If both cache and network fail, return offline page if available
-        if (event.request.destination === 'document') {
-          return caches.match('/index.html');
-        }
-      })
-  );
+        })
+        .catch(() => {
+          // Network failed, try cache
+          return caches.match(event.request).then((response) => {
+            // If it's a document request and cache fails, return index.html
+            if (!response && isHTML) {
+              return caches.match('/index.html');
+            }
+            return response;
+          });
+        })
+    );
+    return;
+  }
+
+  // For images and other static assets: Cache first, then network
+  if (isImage) {
+    event.respondWith(
+      caches.match(event.request)
+        .then((response) => {
+          // Return cached version or fetch from network
+          return response || fetch(event.request).then((response) => {
+            // Don't cache non-successful responses
+            if (!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+
+            // Clone the response
+            const responseToCache = response.clone();
+
+            caches.open(CACHE_NAME)
+              .then((cache) => {
+                cache.put(event.request, responseToCache);
+              });
+
+            return response;
+          });
+        })
+        .catch(() => {
+          // If both cache and network fail, return offline page if available
+          if (event.request.destination === 'document') {
+            return caches.match('/index.html');
+          }
+        })
+    );
+    return;
+  }
+
+  // For other requests: Network first
+  event.respondWith(fetch(event.request));
 });