Issue Description

I'm experiencing an issue with Flutter web service worker caching. When updating my Flutter web application, the service worker version in the flutter_bootstrap_js gets updated, but the actual content doesn't reflect the changes immediately.

What I'm doing

1. I'm using the Flutter web configuration where {{flutter_bootstrap_js}} gets replaced with the actual bootstrap code in index.html:

   <script>
   {{flutter_bootstrap_js}}
   </script>
   

This correctly generates the updated service worker version in the code:

```javascript
_flutter.loader.load({
    serviceWorkerSettings: {
        serviceWorkerVersion: "382593536"
    }
});
```

The Problem

• Despite the service worker version being updated in the generated code, the actual content/UI changes are not reflected immediately
• Even after clearing all browser caches, the old version persists
• Strangely, the changes do appear after some time (usually the next day)

What I've tried

• Clearing all browser caches
• Hard refresh (Ctrl+F5)
• Waiting for some time

Expected Behavior

When the service worker version updates in flutter_bootstrap_js, the changes should be reflected immediately after a refresh.

Actual Behavior

The old version persists despite the new service worker version being present in the code, and changes only appear after a significant delay (hours or next day).

Environment

• Flutter web
• Browser: Chrome (PC,IPhone ,Galaxy) , Safari(IPhone)
• Flutter version: 3.27.1

Question

1. Why isn't the service worker updating immediately despite the new version number?
2. Is there a way to force the immediate update of the service worker cache?
3. What's the proper way to handle service worker updates in Flutter web to ensure immediate content updates?

Would appreciate any insights into this caching behavior and how to properly handle service worker updates in Flutter web applications.

Tags: flutter flutter-web service-worker caching web

When the service worker version updates in flutter_bootstrap_js, the changes should be reflected immediately after a refresh.

Answer

The issue was related to Cloudflare caching, not the Flutter service worker itself. Here's what was happening and how to fix it:

Root Cause

Even though the service worker version was updating correctly in the flutter_bootstrap_js, Cloudflare was serving cached versions of the assets, preventing the new version from being loaded immediately.

Solution

To resolve this issue, you need to:

1. Clear Cloudflare's cache:

   • Go to Cloudflare dashboard
   • Select your domain
   • Navigate to "Caching" > "Configuration"
   • Click "Purge Cache" > "Purge Everything"

2. (Optional) During development, you can:

   • Enable Development Mode in Cloudflare temporarily
   • Or create a Page Rule to bypass cache for specific URLs

Additional Notes

• The delay in seeing updates (next day) was due to Cloudflare's cache expiration
• Browser cache clearing alone won't help if CDN is caching the content
• This is not specific to Flutter's service worker but rather a CDN caching behavior

Hope this helps others who might face similar issues with Flutter web deployments behind Cloudflare!

Tags: cloudflare, flutter-web, caching, cdn