Improved drawing sync: MIME detection, WebP/JPEG support, sync log + frontend updates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/public/manifest.json

@@ -2,16 +2,39 @@
   "name": "InkNote",
   "short_name": "InkNote",
   "description": "Write & draw — notes that sync everywhere",
-  "start_url": ".",
-  "scope": ".",
+  "start_url": "./",
+  "scope": "./",
+  "id": "/",
   "display": "standalone",
   "background_color": "#0d1117",
   "theme_color": "#0d1117",
   "orientation": "any",
   "categories": ["productivity", "utilities"],
   "icons": [
-    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
-    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
+    {
+      "src": "./icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
   ],
   "prefer_related_applications": false
 }

frontend/public/sw.js

@@ -1,66 +1,62 @@
-const CACHE_NAME = 'inknote-v2';
+const CACHE_NAME = 'inknote-v6';
 
-// Install — cache app shell on first load
-self.addEventListener('install', (e) => {
-  e.waitUntil(
-    caches.open(CACHE_NAME).then(async (cache) => {
-      // Cache the main page and manifest
-      const urls = ['/', '/manifest.json', '/icon-192.png', '/icon-512.png'];
-      for (const url of urls) {
-        try { await cache.add(url); } catch (err) { console.warn('[SW] Failed to cache:', url); }
-      }
-    })
-  );
+// Install — don't precache, just activate immediately
+self.addEventListener('install', () => {
   self.skipWaiting();
 });
 
-// Activate — clean old caches
+// Activate — clean old caches, take control
 self.addEventListener('activate', (e) => {
   e.waitUntil(
-    caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))))
+    caches.keys().then(keys =>
+      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+    ).then(() => self.clients.claim())
   );
-  self.clients.claim();
 });
 
-// Fetch handler
+// Fetch — runtime caching strategy
 self.addEventListener('fetch', (e) => {
   const url = new URL(e.request.url);
 
-  // Skip API/WebSocket requests entirely — handled by app + IndexedDB
+  // Never intercept API or WebSocket
   if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) return;
 
-  // Skip non-GET requests
+  // Only handle GET requests
   if (e.request.method !== 'GET') return;
 
-  // Navigation (HTML pages) — network-first, fallback to cache
+  // Navigation (HTML) — network-first with cache fallback
   if (e.request.mode === 'navigate') {
     e.respondWith(
-      fetch(e.request)
-        .then(r => { const c = r.clone(); caches.open(CACHE_NAME).then(cache => cache.put('/', c)); return r; })
-        .catch(() => caches.match('/'))
+      fetch(e.request).then(r => {
+        const clone = r.clone();
+        caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
+        return r;
+      }).catch(() => caches.match(e.request).then(r => r || caches.match('/')))
     );
     return;
   }
 
-  // JS/CSS/images — stale-while-revalidate
+  // Static assets — stale-while-revalidate
   e.respondWith(
-    caches.match(e.request).then(cached => {
-      const fetchP = fetch(e.request).then(r => {
-        if (r.ok && r.type === 'basic') {
-          caches.open(CACHE_NAME).then(cache => cache.put(e.request, r.clone()));
-        }
-        return r;
-      }).catch(() => cached);
-      return cached || fetchP;
-    })
+    caches.open(CACHE_NAME).then(cache =>
+      cache.match(e.request).then(cached => {
+        const fetchP = fetch(e.request).then(r => {
+          if (r.ok) cache.put(e.request, r.clone());
+          return r;
+        }).catch(() => cached);
+        return cached || fetchP;
+      })
+    )
   );
 });
 
-// Background sync
+// Background sync trigger
 self.addEventListener('sync', (e) => {
   if (e.tag === 'sync-changes') {
-    e.waitUntil(self.clients.matchAll().then(clients => {
-      clients.forEach(c => c.postMessage({ type: 'FLUSH_QUEUE' }));
-    }));
+    e.waitUntil(
+      self.clients.matchAll().then(clients =>
+        clients.forEach(c => c.postMessage({ type: 'FLUSH_QUEUE' }))
+      )
+    );
   }
-});
+});