T5: Offline queue + background sync — fix missing offline banner, add API GET caching to SW #24

New Issue

2026-05-21T16:04:36Z

shawn commented

2026-05-21 16:04:36 +00:00

Problem

The offline queue implementation was mostly complete from a prior run, but the #offlineBanner HTML element was missing from the DOM. The showOfflineBanner() and hideOfflineBanner() functions referenced document.getElementById("offlineBanner") but no element with that ID existed. The queueCountBadge span inside the banner was also missing.

Additionally, the Service Worker passed through all API calls without caching, so API GET requests (like loading the assets list) would fail when offline.

Fix

Added missing #offlineBanner HTML element after the header div: amber banner with 📡 Offline mode — changes will sync when connected text and queueCountBadge span
Enhanced Service Worker (static/sw.js): API GET calls now use network-first with cache fallback strategy (POST/PUT/DELETE still pass through). Bumped cache version from canteen-v1 to canteen-v2.

Files Changed

static/index.html: Added offline banner HTML element (7 lines)
static/sw.js: Added API GET caching strategy, bumped cache version (+15/-2 lines)

Commits

37ba54b (on top of 6229966)

Verification

curl -sk https://localhost:8901/sw.js returns updated SW with v2 cache
curl -sk https://localhost:8901/ | grep offlineBanner returns 3 matches (CSS definition, JS reference, HTML element)
All key functions present: initOfflineSupport, queueOfflineCreate, processOfflineQueue, registerServiceWorker, showOfflineBanner, hideOfflineBanner

## Problem The offline queue implementation was mostly complete from a prior run, but the `#offlineBanner` HTML element was missing from the DOM. The `showOfflineBanner()` and `hideOfflineBanner()` functions referenced `document.getElementById("offlineBanner")` but no element with that ID existed. The `queueCountBadge` span inside the banner was also missing. Additionally, the Service Worker passed through all API calls without caching, so API GET requests (like loading the assets list) would fail when offline. ## Fix 1. **Added missing `#offlineBanner` HTML element** after the header div: amber banner with `📡 Offline mode — changes will sync when connected` text and `queueCountBadge` span 2. **Enhanced Service Worker** (`static/sw.js`): API GET calls now use network-first with cache fallback strategy (POST/PUT/DELETE still pass through). Bumped cache version from `canteen-v1` to `canteen-v2`. ## Files Changed - `static/index.html`: Added offline banner HTML element (7 lines) - `static/sw.js`: Added API GET caching strategy, bumped cache version (+15/-2 lines) ## Commits - 37ba54b (on top of 6229966) ## Verification - `curl -sk https://localhost:8901/sw.js` returns updated SW with v2 cache - `curl -sk https://localhost:8901/ | grep offlineBanner` returns 3 matches (CSS definition, JS reference, HTML element) - All key functions present: initOfflineSupport, queueOfflineCreate, processOfflineQueue, registerServiceWorker, showOfflineBanner, hideOfflineBanner

shawn closed this issue

2026-05-21 16:04:36 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: shawn/canteen-asset-tracker#24