Flutter Web Update Cache on Firebase Hosting

[Craig Oda]

I am running Flutter 2.2.2 with Dart 2.13 for a web site on Firebase Hosting. When I do an update to the web site, I need to press reload to see the changes.  Is there a setting that I can force the reload only when I update the content?

The simple site is here: https://oppkey.com/#/

I can force the cache to reload if I set 'Cache-Control' to 'no-cache' in the HTTP headers.  However, that is not an acceptable solution as the site takes too long to load.

this article seems to indicate that the user should not have to press reload even when I don't specify 'no-cache'

https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039

The relevant portion is below.  Can anyone tell me how I can get the web updates viewable to my audience without people have to press the "reload" button on the browser?

> To start, we’ve optimized caching behavior with a new service worker-loading mechanism, and fixed double-downloading of main.dart.js. In previous versions of Flutter web, the service worker downloaded updates to your app in the background while giving your user access to the stale version of your app. Once that update was downloaded, the user wouldn’t see those changes until they refreshed the browser page a couple times. As of Flutter 2.2, when the new service worker detects a change, the user will wait until the updates are downloaded to use the app, but then they’ll see the updates without requiring a second manual refresh of the page.

Enabling this change requires you to regenerate the index.html of your Flutter app. To do that, save your modifications, delete the index.html file, and then run flutter create . in your project directory to recreate it.

[sumd...@gmail.com]

You're not crazy and you're not wrong. This is a bug and I'm not entirely sure where the bug lies, but I *suspect* it's in Chrome. However, I've had no luck getting anyone to own or fix this bug. The workaround I've built for the project I'm working on involves building the web application, then renaming main.dart.js and updating the record keeping system before doing a firebase deploy.

Here's the relevant excerpt from my Makefile:

flutter build web --release --no-sound-null-safety -t lib/main_web.dart
rm -rf firebase/hosting
cp -r build/web firebase/hosting
perl build_stamper.pl

And the build_stamper.pl script is one that I wrote to rename main.dart.js, update index.html, and update flutter_service_worker.js with the appropriate file name and MD5 sum.

https://gist.github.com/sbeitzel/44bf71e05a595ae29ec9b4ac2ddb9d67

[Craig Oda]

Wow, thanks so much!  This seems like a fairly significant problem with Flutter web.  I can't find an open issue on GitHub for this.

Did you try incrementing the version in pubspec.yaml before you built your Perl script?

It's amazing you were able to develop this workaround.

Have a nice day.

--
You received this message because you are subscribed to a topic in the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/flutter-dev/acxF9zW5qT8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/cbe72d50-a866-4475-89d7-913947251808n%40googlegroups.com.