# ๐Ÿ”ง Fix Service Worker Cache Issue - Flutter Web ## The Problem Your browser console shows: ``` Loading from existing service worker. Service worker already active. main.dart.js:5658 Uncaught Error ``` This means the **service worker is caching old/broken JavaScript code** and serving it instead of the new version! --- ## โšก IMMEDIATE FIX (User Side) ### Option 1: Clear Service Worker (Recommended) 1. **Open DevTools** (F12) 2. Go to **Application** tab (Chrome) or **Storage** tab (Firefox) 3. Click **Service Workers** (left sidebar) 4. Find your service worker for `chitfund.deepteklabs.com` 5. Click **Unregister** 6. **Hard refresh**: `Ctrl + Shift + R` ### Option 2: Clear All Site Data 1. Open DevTools (F12) 2. Application tab โ†’ **Clear storage** (left sidebar) 3. Check all boxes (Cookies, Cache, Storage, Service workers) 4. Click **Clear site data** 5. Close DevTools 6. Refresh page ### Option 3: Incognito Mode (Quick Test) ``` Ctrl + Shift + N (Windows/Linux) Cmd + Shift + N (Mac) ``` No service worker cache in incognito! --- ## ๐Ÿ› ๏ธ PERMANENT FIX (Developer Side) The service worker needs to be disabled or properly managed during deployments. ### Solution 1: Disable Service Worker (Simplest) Edit `luckychit/web/index.html`: ```html ``` ### Solution 2: Force Service Worker Update Edit `luckychit/web/flutter_bootstrap.js` or add to `index.html`: ```html ``` ### Solution 3: Build Without Service Worker Build Flutter without service worker: ```bash flutter build web --release --pwa-strategy=none ``` This completely disables the service worker. --- ## ๐Ÿ”ง Fix for Current Production ### Step 1: Update index.html ```bash # On your dev machine cd luckychit nano web/index.html ``` Add this script before ``: ```html ``` ### Step 2: Rebuild and Deploy ```bash # Commit changes git add web/index.html git commit -m "Fix service worker caching issue" git push origin prodnew # SSH to production ssh luckychit@192.168.8.148 cd /home/luckychit/apps/chitfund # Pull and rebuild git pull origin prodnew cd luckychit flutter clean flutter pub get flutter build web --release --pwa-strategy=none pm2 restart luckychit-frontend # Also clear nginx cache ssh root@ sudo rm -rf /var/cache/nginx/* sudo systemctl reload nginx ``` ### Step 3: Tell Users to Clear Service Worker Create an announcement: ``` โš ๏ธ Important: Clear your browser cache! 1. Press F12 to open DevTools 2. Go to Application tab 3. Click Service Workers 4. Click "Unregister" for chitfund.deepteklabs.com 5. Hard refresh: Ctrl + Shift + R ``` --- ## ๐Ÿ” Understanding the Error ### What Happened: ``` 1. Old version deployed with service worker 2. Service worker cached main.dart.js (JavaScript) 3. You deployed new version 4. Browser loads new HTML 5. Service worker serves OLD cached JavaScript 6. Old JS + New HTML = Error! ``` ### The Error Chain: ```javascript main.dart.js:5658 Uncaught Error at Object.l (main.dart.js:3396:20) ``` This is a JavaScript error in compiled Dart code. Usually means: - **Version mismatch** between HTML and cached JS - **Corrupted cache** from incomplete deployment - **Service worker** serving stale files --- ## ๐Ÿ“‹ Complete Fix Procedure ### On Your Dev Machine: ```bash cd /home/user/workspace/chitfund/luckychit # Add service worker clearing script nano web/index.html # (Add the script shown above) # Commit and push git add web/index.html git commit -m "Add service worker clearing on load" git push origin prodnew ``` ### On Production Server (192.168.8.148): ```bash cd /home/luckychit/apps/chitfund # Pull latest git pull origin prodnew # Rebuild Flutter WITHOUT service worker cd luckychit flutter clean rm -rf .dart_tool build flutter pub get flutter build web --release --pwa-strategy=none # Restart PM2 pm2 restart luckychit-frontend # Verify pm2 logs luckychit-frontend --lines 20 ``` ### On Nginx Proxy LXC: ```bash # Clear nginx cache sudo rm -rf /var/cache/nginx/* sudo systemctl reload nginx ``` ### On Cloudflare: 1. Login to dashboard 2. Go to **Caching** 3. Click **Purge Everything** ### In Browser: 1. Open DevTools (F12) 2. Application โ†’ Service Workers โ†’ Unregister all 3. Application โ†’ Clear storage โ†’ Clear site data 4. Hard refresh: `Ctrl + Shift + R` 5. Close and reopen browser --- ## ๐ŸŽฏ Update Your Deployment Scripts ### Modify `deploy-frontend-only.sh`: ```bash # Add --pwa-strategy=none to disable service worker flutter build web --release --web-renderer html --pwa-strategy=none --build-number=$BUILD_NUMBER ``` ### Modify `deploy-full.sh`: ```bash # Same change flutter build web --release --web-renderer html --pwa-strategy=none --build-number=$BUILD_NUMBER ``` --- ## ๐Ÿงช Verify It's Fixed ### Check Browser Console: After refresh, you should NOT see: ``` โŒ Loading from existing service worker โŒ Service worker already active โŒ Uncaught Error ``` You SHOULD see: ``` โœ… No stored auth data found (normal) โœ… App loads without errors โœ… Login screen appears ``` ### Check Service Workers: ``` F12 โ†’ Application โ†’ Service Workers Should be empty or show "No service workers" ``` ### Check Caches: ``` F12 โ†’ Application โ†’ Cache Storage Should be empty or minimal ``` --- ## ๐ŸŽ“ Why Service Workers Are Problematic ### For Static Sites: โœ… **Good**: Offline support, faster loading โœ… **Good**: PWA functionality ### For Frequently Updated Apps: โŒ **Bad**: Caches old code โŒ **Bad**: Hard to invalidate โŒ **Bad**: Users see old version โŒ **Bad**: Version conflicts cause errors ### Recommendation: **Disable service workers** until your app is stable and updates are infrequent. --- ## ๐Ÿ›ก๏ธ Prevention ### 1. Build Without Service Worker Always use: ```bash flutter build web --release --pwa-strategy=none ``` ### 2. Add Clear Script to index.html Force clear service workers on every load (shown above). ### 3. Proper Cache Headers Already done in `index.html`: ```html ``` ### 4. Version Your Builds Already done in deployment scripts: ```bash --build-number=$(date +%s) ``` ### 5. Update Deployment Documentation Add "Clear service worker" step to deployment checklist. --- ## ๐Ÿ“ฑ Mobile Browsers Service worker issues are WORSE on mobile! ### iOS Safari: ``` Settings โ†’ Safari โ†’ Advanced โ†’ Website Data Find your site โ†’ Swipe left โ†’ Delete ``` ### Android Chrome: ``` Settings โ†’ Site Settings โ†’ chitfund.deepteklabs.com Clear & reset ``` ### Or Use Private Mode: Always test updates in private/incognito first! --- ## ๐Ÿ” Debug Service Worker ### Check Registration: Open console and run: ```javascript navigator.serviceWorker.getRegistrations().then(registrations => { console.log('Service Workers:', registrations); registrations.forEach(r => console.log('Scope:', r.scope)); }); ``` ### Check Caches: ```javascript caches.keys().then(keys => { console.log('Cache Keys:', keys); keys.forEach(key => { caches.open(key).then(cache => { cache.keys().then(requests => { console.log(`Cache ${key}:`, requests.length, 'items'); }); }); }); }); ``` ### Force Update: ```javascript navigator.serviceWorker.getRegistrations().then(registrations => { registrations.forEach(r => r.update()); }); ``` ### Unregister All: ```javascript navigator.serviceWorker.getRegistrations().then(registrations => { registrations.forEach(r => r.unregister()); console.log('All service workers unregistered'); }); ``` --- ## โœ… Checklist - [ ] Add service worker clearing script to `index.html` - [ ] Build with `--pwa-strategy=none` - [ ] Update deployment scripts to include `--pwa-strategy=none` - [ ] Clear nginx cache on proxy LXC - [ ] Purge Cloudflare cache - [ ] Tell users to clear service workers - [ ] Test in incognito mode - [ ] Verify no errors in console - [ ] Update deployment documentation --- ## ๐ŸŽฏ Quick Fix Summary **Problem**: Service worker caching old JavaScript **Symptom**: `Uncaught Error` in console **Root Cause**: Flutter service worker serving stale cached files **Solution**: Disable service workers + rebuild + clear all caches **Do This Now**: ```bash # 1. Rebuild without service worker flutter build web --release --pwa-strategy=none # 2. Clear browser service worker F12 โ†’ Application โ†’ Service Workers โ†’ Unregister # 3. Hard refresh Ctrl + Shift + R ``` --- **Service workers are caching old code! Rebuild with `--pwa-strategy=none` and clear all caches.** ๐Ÿš€