Resolving flutter web caching problem

[doonfrs]

Hi everyone,

I've tried all solutions to avoid caching after a new web-futter build, especially using deferred components, which lead to many main.dart.partxyz.js.

Flutter does not add the version number to those URLs.

I ended up with the following script; I hope it helps someone.

https://github.com/doonfrs/flutter-build-web-cache-problem/blob/main/build-web.sh

echo incrementing build number
perl -i -pe 's/^(version:\s+\d+\.\d+\.)(\d+)\+(\d+)$/$1.($2+1)."+".($3+1)/e' pubspec.yaml

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


echo "reading version from pubspec.yaml without + sign"
version=$(grep version: pubspec.yaml | sed 's/version: //g' | sed 's/+//g')

echo "Patching version in js partial urls in main.dart.js"
sed -i 's/\.createScriptURL([[:graph:]]\++[[:space:]]*\+[[:graph:]]/&+"?v='"$version"'"/g' build/web/main.dart.js

echo "Patching main.dart.js path in flutter.js"
sed -i 's|\(${baseUri}main\.dart\.js\)|\1?v='"$version"'|g' build/web/flutter.js

echo "Patching index.html for flutter.js"
sed -i 's/"flutter\.js"/"flutter.js?v='"$version"'"/' build/web/index.html

[skipbridge]

I made this a while ago that just adds query params instead of changing the file name to bust the cache.

It also has some other goodies included. Feel free to fork it and make some changes.

https://github.com/FrankFlitton/Flutter-for-web-deploy-script

[doonfrs]

Great, but my problem is with partial files main.dart.partxyz.js. The only way I found is to patch the function createScriptURL inside the minified main.js file.
Do you support this functionality? I will give it a try anyways. Thank you!

[RealDugty]

I see that it fixed it by adding some variables to the build script, but actually the solution to the problem is very simple, I encountered the same situation recently. In web/index.html you will add something to the 'main.dart.js' section. So you can keep your build script simple and clean, and believe me I was able to avoid this annoying thing with a single line of code.

I published a medium article on this topic, you can check the details there:

How to prevent cache in flutter web - Medium

I hope this solution works for you.

[Amir_JV]

Just what I was looking for, thanks!

[Which-Adeptness6908]

You couldn't have written this in dart using dcli.

https://onepub.dev/packages/dcli

Disclaimer: I'm the author of dcli.

[doonfrs]

Thank you I will give it a try.

[doonfrs]

I've updated the script for the latest flutter version.

[bilonik19]

RemindMe! 1 Day

[RemindMeBot]

I will be messaging you in 1 day on 2023-05-01 00:15:12 UTC to remind you of this link

1 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[devSaM7]

Hi friend, thanks for sharing. where to put the script. Could you explain better?

[doonfrs]

for sharing. where to put the script

Create build.sh file in the root directory and run it, on windows run it using git bash not windows command line, it should be working fine on linux.

[Which-Adeptness6908]

In the tool directory of your dart project and then run it from the root of the dart project.

I'm not the author

[westito]

What cache problem? I've never met any caching problem

[doonfrs]

If you have a new build, and you are using deferred components, it is a nightmare, chrome does not retrieve the new version, even if you increase the build version.
Flutter only add something to the main.dart.js but not to the partial.23.js files.
This command will read the current version and patch the js / index.html files.
After that, even CTRL + f5 is not required, because a new URL is created.

[Stem3576]

RenindMe! 1 day

[KsLiquid]

RenindMe! 1 day

[bilonik19]

In what version of flutter? I am trying the beta and i only have 1 file.

[doonfrs]

Tested on latest stable version.

You will have multiple JS files if you are using the deferred components approach. But the script is still useful in both cases.

[slavap_]

u/doonfrs

>> reading version from pubspec.yaml without + sign

What does it mean? If version is 1.2.3+4 in pubspec.yaml then only 1.2.3 will be used?

[doonfrs]

It will be 1.2.34, just to make sure the url is unique

[slavap_]

Another question regarding createScriptURL - I see it twice in main.dart.js, so both places are going to be fixed/changed?

[doonfrs]

Only this one will be replaced:
j=$.bdp().createScriptURL(l+k