fluxy-bot 0.10.12 → 0.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.10.12",
+  "version": "0.10.13",
   "releaseNotes": [
     "Adding a way for users to claim their fluxies on the fluxy.bot dashboard",
     "2. ",

package/supervisor/index.ts

@@ -53,21 +53,37 @@ const MIME_TYPES: Record<string, string> = {
 const SW_JS = `// Service worker — app-shell caching + push notifications
 // Caching strategy:
 //   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
-//   Navigation (HTML)                   → network-first, cache fallback
+//   Navigation (HTML)                   → stale-while-revalidate (precached on install)
 //   Static assets (img/video/fonts)     → stale-while-revalidate
 //   JS/CSS modules                      → stale-while-revalidate
 //   API, WebSocket, Vite internals      → network-only (no cache)
 
-var CACHE = 'fluxy-v2';
+var CACHE = 'fluxy-v4';
 var HASHED_RE = new RegExp('/assets/.+-[a-zA-Z0-9]{6,}[.](js|css)$');
 
-self.addEventListener('install', function() { self.skipWaiting(); });
+// Precache the HTML shell on install so the cache is never empty.
+// Without this, the first navigation isn't intercepted (SW wasn't
+// controlling yet), so refresh would find an empty cache → white screen.
+self.addEventListener('install', function(e) {
+  console.log('[SW] installing, cache:', CACHE);
+  e.waitUntil(
+    caches.open(CACHE)
+      .then(function(c) { return c.add('/'); })
+      .then(function() { console.log('[SW] precached / — calling skipWaiting'); return self.skipWaiting(); })
+      .catch(function(err) { console.error('[SW] install failed:', err); throw err; })
+  );
+});
 
 self.addEventListener('activate', function(e) {
+  console.log('[SW] activating, cache:', CACHE);
   e.waitUntil(
     caches.keys()
-      .then(function(keys) { return Promise.all(keys.filter(function(k) { return k !== CACHE; }).map(function(k) { return caches.delete(k); })); })
-      .then(function() { return self.clients.claim(); })
+      .then(function(keys) {
+        var old = keys.filter(function(k) { return k !== CACHE; });
+        if (old.length) console.log('[SW] deleting old caches:', old);
+        return Promise.all(old.map(function(k) { return caches.delete(k); }));
+      })
+      .then(function() { console.log('[SW] claiming clients'); return self.clients.claim(); })
   );
 });
 
@@ -101,16 +117,24 @@ self.addEventListener('fetch', function(event) {
     return;
   }
 
-  // Navigation (HTML pages) → network-first, cached shell fallback
+  // Navigation (HTML pages) → stale-while-revalidate
+  // Serves cached shell INSTANTLY (no white flash on refresh), then
+  // refreshes cache from network in the background.
   if (request.mode === 'navigate') {
-    event.respondWith(
-      fetch(request)
-        .then(function(r) {
-          if (r.ok) caches.open(CACHE).then(function(c) { c.put(request, r.clone()); });
-          return r;
-        })
-        .catch(function() { return caches.match(request).then(function(r) { return r || caches.match('/'); }); })
-    );
+    console.log('[SW] navigate →', url.pathname);
+    event.respondWith(caches.open(CACHE).then(function(c) {
+      return c.match('/').then(function(hit) {
+        console.log('[SW] cache hit for /:', !!hit);
+        var net = fetch(request)
+          .then(function(r) {
+            console.log('[SW] network response for /:', r.status);
+            if (r.ok) c.put('/', r.clone());
+            return r;
+          })
+          .catch(function(err) { console.warn('[SW] network failed, using cache:', err.message); return hit; });
+        return hit || net;
+      });
+    }));
     return;
   }
 

package/workspace/client/index.html

@@ -46,6 +46,7 @@
     // The last painted frame before teardown will be the dark splash
     // instead of a white gap.
     window.addEventListener('beforeunload', function () {
+      console.log('[splash] beforeunload — showing splash');
       var s = document.getElementById('splash');
       if (s) { s.style.transition = 'none'; s.style.display = 'flex'; s.style.opacity = '1'; }
     });
@@ -53,16 +54,38 @@
     <script type="module" src="/src/main.tsx"></script>
     <script>
     if('serviceWorker' in navigator){
+      console.log('[sw-reg] current controller:', navigator.serviceWorker.controller ? 'yes' : 'none');
+      // When a new SW takes control (update), show splash and reload
+      // so the new caching strategy kicks in immediately.
+      var swRefreshing=false;
+      navigator.serviceWorker.addEventListener('controllerchange',function(){
+        console.log('[sw-reg] controllerchange fired, refreshing:', swRefreshing);
+        if(swRefreshing)return;
+        swRefreshing=true;
+        var s=document.getElementById('splash');
+        if(s){s.style.transition='none';s.style.display='flex';s.style.opacity='1'}
+        console.log('[sw-reg] reloading after new SW took control');
+        location.reload();
+      });
       navigator.serviceWorker.register('/sw.js').then(function(r){
+        console.log('[sw-reg] registered, active:', r.active?.state, 'waiting:', !!r.waiting, 'installing:', !!r.installing);
         r.update();
-        if(r.waiting){r.waiting.postMessage({type:'SKIP_WAITING'})}
+        if(r.waiting){
+          console.log('[sw-reg] found waiting SW — sending SKIP_WAITING');
+          r.waiting.postMessage({type:'SKIP_WAITING'});
+        }
         r.addEventListener('updatefound',function(){
+          console.log('[sw-reg] updatefound — new SW installing');
           var w=r.installing;
           if(w)w.addEventListener('statechange',function(){
-            if(w.state==='installed'&&navigator.serviceWorker.controller)w.postMessage({type:'SKIP_WAITING'});
+            console.log('[sw-reg] installing SW state:', w.state);
+            if(w.state==='installed'&&navigator.serviceWorker.controller){
+              console.log('[sw-reg] new SW installed — sending SKIP_WAITING');
+              w.postMessage({type:'SKIP_WAITING'});
+            }
           });
         });
-      });
+      }).catch(function(err){ console.error('[sw-reg] registration failed:', err); });
     }
     </script>
     <script src="/fluxy/widget.js"></script>

package/workspace/client/public/sw.js

@@ -11,15 +11,28 @@ const CACHE = 'fluxy-v4';
 // Precache the HTML shell on install so the cache is never empty.
 // Without this, the first navigation isn't intercepted (SW wasn't
 // controlling yet), so refresh would find an empty cache → white screen.
-self.addEventListener('install', (e) => e.waitUntil(
-  caches.open(CACHE).then(c => c.add('/')).then(() => self.skipWaiting())
-));
+self.addEventListener('install', (e) => {
+  console.log('[SW] installing, cache:', CACHE);
+  e.waitUntil(
+    caches.open(CACHE)
+      .then(c => c.add('/'))
+      .then(() => { console.log('[SW] precached / — calling skipWaiting'); return self.skipWaiting(); })
+      .catch(err => { console.error('[SW] install failed:', err); throw err; })
+  );
+});
 
-self.addEventListener('activate', (e) => e.waitUntil(
-  caches.keys()
-    .then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))))
-    .then(() => self.clients.claim())
-));
+self.addEventListener('activate', (e) => {
+  console.log('[SW] activating, cache:', CACHE);
+  e.waitUntil(
+    caches.keys()
+      .then(keys => {
+        const old = keys.filter(k => k !== CACHE);
+        if (old.length) console.log('[SW] deleting old caches:', old);
+        return Promise.all(old.map(k => caches.delete(k)));
+      })
+      .then(() => { console.log('[SW] claiming clients'); return self.clients.claim(); })
+  );
+});
 
 self.addEventListener('message', (e) => {
   if (e.data?.type === 'SKIP_WAITING') self.skipWaiting();
@@ -56,11 +69,17 @@ self.addEventListener('fetch', (event) => {
   // refreshes cache from network in the background.
   // First visit has no cache → falls through to network.
   if (request.mode === 'navigate') {
+    console.log('[SW] navigate →', url.pathname);
     event.respondWith(caches.open(CACHE).then(c =>
       c.match('/').then(hit => {
+        console.log('[SW] cache hit for /:', !!hit);
         const net = fetch(request)
-          .then(r => { if (r.ok) c.put('/', r.clone()); return r; })
-          .catch(() => hit);
+          .then(r => {
+            console.log('[SW] network response for /:', r.status);
+            if (r.ok) c.put('/', r.clone());
+            return r;
+          })
+          .catch(err => { console.warn('[SW] network failed, using cache:', err.message); return hit; });
         return hit || net;
       })
     ));

package/workspace/client/src/main.tsx

@@ -12,10 +12,15 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 // Fade out the HTML splash screen once React has actually painted.
 // React 18's createRoot().render() is async — wait for the next frame
 // to ensure the app is visible before removing the splash.
+console.log('[main] React render called, waiting for paint to hide splash');
 requestAnimationFrame(() => requestAnimationFrame(() => {
+  console.log('[main] double-rAF fired — hiding splash');
   const splash = document.getElementById('splash');
   if (splash) {
     splash.style.opacity = '0';
-    splash.addEventListener('transitionend', () => { splash.style.display = 'none'; }, { once: true });
+    splash.addEventListener('transitionend', () => {
+      splash.style.display = 'none';
+      console.log('[main] splash hidden');
+    }, { once: true });
   }
 }));