Prevent caching of pages?

flutter browser-cache flutter-web

1,836

Every browser does caching and is completely normal when you don't immediately see the changes on the client browser. It does take some time for the browser to realize the code has been changed on the server and needs to update its local cache. And is completely depends on the client browser settings and client's connection speed.

But if your situations demand the client to have an updated version of the website in no time, there is a workaround.

The main.dart.js file is something like this below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Flutter App</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

In order to force browsers to reload the app each time we want that, add a unique parameter to the main.dart.js script-src (for example a version, though it can be anything, even just a random number after ?). The new index.html will look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Flutter App</title>
  </head>
  <body>
    <script src="main.dart.js?version=1" type="application/javascript"></script>
  </body>
</html>

Cons:

You have to manually add the incremented version number every time you want to deploy. Maybe you can write a script for doing that.
It does still take time if the client has slow internet connection. The problem arises when browsers like Chrome show Lite(cached) version of the website untill internet connection is fast enough.
Previous versions still persist to live on the client's browser till timeout

1,836

Author by

Eradicatore

Updated on December 17, 2022

Comments

Eradicatore over 1 year

I've noticed while I deploy my flutter web project with nginx, after doing a "flutter build web" that if I don't delete the cache the old files are still in my chrome browser. Is there a way to force a refresh for users automatically if I deploy updates?
Eradicatore about 4 years

Thanks for the response! I noticed that pretty much this hasn't been the problem I expected it to be with flutter and nginx. I also use the keyboard chrome shortcut to clear cache if it ever is a problem.