From 37ba54b750e2ee7ad3cedaa9151df60479c28350 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Thu, 21 May 2026 12:01:05 -0400
Subject: [PATCH] =?UTF-8?q?T5:=20Offline=20queue=20+=20background=20sync?=
 =?UTF-8?q?=20=E2=80=94=20fix=20missing=20offline=20banner,=20add=20API=20?=
 =?UTF-8?q?GET=20caching=20to=20SW?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added missing #offlineBanner HTML element with queueCountBadge
  (showOfflineBanner/hideOfflineBanner were referencing it but it didn't exist)
- Enhanced SW: API GET calls now use network-first with cache fallback
  (POST/PUT/DELETE still pass through — main thread handles offline queuing)
- Bumped SW cache from canteen-v1 to canteen-v2
---
 static/index.html |  8 ++++++++
 static/sw.js      | 19 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 6d38204..48bdfd9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1149,6 +1149,14 @@
     </div>
   </div>
 
+  <!-- ═══════════════════════════════════════════════════════════════════════
+       OFFLINE BANNER
+       ═══════════════════════════════════════════════════════════════════════ -->
+  <div id="offlineBanner" class="offline-banner">
+    📡 Offline mode — changes will sync when connected
+    <span id="queueCountBadge" class="queue-count" style="display:none;">0</span>
+  </div>
+
   <!-- ═══════════════════════════════════════════════════════════════════════
        DRAWER
        ═══════════════════════════════════════════════════════════════════════ -->
diff --git a/static/sw.js b/static/sw.js
index 7e1862b..c943e3e 100644
--- a/static/sw.js
+++ b/static/sw.js
@@ -3,7 +3,7 @@
 // Caches app shell + CDN deps. Network-first for API, cache fallback for static.
 // ═══════════════════════════════════════════════════════════════════════════
 
-const CACHE_NAME = 'canteen-v1';
+const CACHE_NAME = 'canteen-v2';
 
 // App shell — core resources needed to boot the PWA
 const APP_SHELL = [
@@ -73,8 +73,23 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // API calls: pass through — main thread handles offline queuing
+  // API GET calls: network-first, cache fallback (offline reads)
+  // API POST/PUT/DELETE: pass through — main thread handles offline queuing
   if (url.pathname.startsWith('/api/')) {
+    if (event.request.method === 'GET') {
+      event.respondWith(
+        fetch(event.request)
+          .then((response) => {
+            if (response.ok) {
+              const clone = response.clone();
+              caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+            }
+            return response;
+          })
+          .catch(() => caches.match(event.request))
+      );
+    }
+    // Non-GET API calls: pass through — main thread queues offline writes
     return;
   }