10 KiB

Raw Blame History

🔧 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)

Open DevTools (F12)
Go to Application tab (Chrome) or Storage tab (Firefox)
Click Service Workers (left sidebar)
Find your service worker for chitfund.deepteklabs.com
Click Unregister
Hard refresh: Ctrl + Shift + R

Option 2: Clear All Site Data

Open DevTools (F12)
Application tab → Clear storage (left sidebar)
Check all boxes (Cookies, Cache, Storage, Service workers)
Click Clear site data
Close DevTools
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:

<head>
  <!-- Existing content -->
  
  <!-- Disable service worker during development/frequent updates -->
  <script>
    // Unregister all service workers on load
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for (let registration of registrations) {
          registration.unregister();
        }
      });
    }
  </script>
</head>

Solution 2: Force Service Worker Update

Edit luckychit/web/flutter_bootstrap.js or add to index.html:

<script>
  // Force service worker update on page load
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
      registrations.forEach(function(registration) {
        registration.update(); // Force update check
      });
    });
    
    // Listen for updates
    navigator.serviceWorker.addEventListener('controllerchange', function() {
      window.location.reload(); // Reload when new service worker takes over
    });
  }
</script>

Solution 3: Build Without Service Worker

Build Flutter without service worker:

flutter build web --release --pwa-strategy=none

This completely disables the service worker.

🔧 Fix for Current Production

Step 1: Update index.html

# On your dev machine
cd luckychit
nano web/index.html

Add this script before </body>:

<body>
  <!-- Existing content -->
  
  <!-- Force clear service worker on load -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for (let registration of registrations) {
          console.log('Unregistering service worker:', registration);
          registration.unregister();
        }
      });
      
      // Clear all caches
      if ('caches' in window) {
        caches.keys().then(function(cacheNames) {
          cacheNames.forEach(function(cacheName) {
            console.log('Deleting cache:', cacheName);
            caches.delete(cacheName);
          });
        });
      }
    }
  </script>
  
  <script src="flutter_bootstrap.js" async></script>
</body>

Step 2: Rebuild and Deploy

# 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@<nginx-proxy-ip>
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:

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:

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):

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:

# Clear nginx cache
sudo rm -rf /var/cache/nginx/*
sudo systemctl reload nginx

On Cloudflare:

Login to dashboard
Go to Caching
Click Purge Everything

In Browser:

Open DevTools (F12)
Application → Service Workers → Unregister all
Application → Clear storage → Clear site data
Hard refresh: Ctrl + Shift + R
Close and reopen browser

🎯 Update Your Deployment Scripts

Modify `deploy-frontend-only.sh`:

# 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`:

# 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:

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:

<meta http-equiv="Cache-Control" content="no-cache">

4. Version Your Builds

Already done in deployment scripts:

--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:

navigator.serviceWorker.getRegistrations().then(registrations => {
  console.log('Service Workers:', registrations);
  registrations.forEach(r => console.log('Scope:', r.scope));
});

Check Caches:

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:

navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(r => r.update());
});

Unregister All:

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:

# 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. 🚀

10 KiB Raw Blame History

🔧 Fix Service Worker Cache Issue - Flutter Web

The Problem

⚡ IMMEDIATE FIX (User Side)

Option 1: Clear Service Worker (Recommended)

Option 2: Clear All Site Data

Option 3: Incognito Mode (Quick Test)

🛠️ PERMANENT FIX (Developer Side)

Solution 1: Disable Service Worker (Simplest)

Solution 2: Force Service Worker Update

Solution 3: Build Without Service Worker

🔧 Fix for Current Production

Step 1: Update index.html

Step 2: Rebuild and Deploy

Step 3: Tell Users to Clear Service Worker

🔍 Understanding the Error

What Happened:

The Error Chain:

📋 Complete Fix Procedure

On Your Dev Machine:

On Production Server (192.168.8.148):

On Nginx Proxy LXC:

On Cloudflare:

In Browser:

🎯 Update Your Deployment Scripts

Modify deploy-frontend-only.sh:

Modify deploy-full.sh:

🧪 Verify It's Fixed

Check Browser Console:

Check Service Workers:

Check Caches:

🎓 Why Service Workers Are Problematic

For Static Sites:

For Frequently Updated Apps:

Recommendation:

🛡️ Prevention

1. Build Without Service Worker

2. Add Clear Script to index.html

3. Proper Cache Headers

4. Version Your Builds

5. Update Deployment Documentation

📱 Mobile Browsers

iOS Safari:

Android Chrome:

Or Use Private Mode:

🔍 Debug Service Worker

Check Registration:

Check Caches:

Force Update:

Unregister All:

✅ Checklist

🎯 Quick Fix Summary

10 KiB

Raw Blame History

Modify `deploy-frontend-only.sh`:

Modify `deploy-full.sh`: