how to update flutter web application cached files on each deploy?

Question

I use custom flutter localization with an en.json file that contains all of application strings, but after deploying web application for the first time, flutter service worker caches en.json and it'll use the first cached en.json for all of the next deploys which causes new Text widgets that have new strings (that are not in the first en.json) fail assertion data != null. Is there a way to force flutter web app to update cached assets after each deploy?

Vernverna

Does this article help? medium.com/flutter-community/… – Hussar

Answer 1

This problem is resolved in newer version of flutter.

Silverplate

Do you have any link to an issue/pull request about this? – Vickyvico

Answer 2

It is because of the service worker which is runninng in the client background. If you don't need the caching and PWA functionality you can build the app without it.

flutter build web --pwa-strategy=none

After that you have to make sure that you unregister all service workers from the clients otherwise you will still see the old en.json. You can add this script to your index.html

<script>
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.getRegistrations()
  .then(function(registrations) {
     for(let registration of registrations) {
       registration.unregister();
     }
 });
}
</script>

Hussar

thank you, I need caching in my application. but I need cached files to be updated whenever I release an update. – Vernverna

I read somewhere that they are working on a solution. Maybe this helps: github.com/flutter/flutter/issues/55967 – Hussar

Answer 3

You can use a Firestore listener to a specific document or Firebase Remote Config in real time, to check if needs to clear the cache.

Once it needs to clear the webpage cache, simply run:

import 'dart:html' as html show window;
html.window.location.reload();

https://firebase.google.com/docs/remote-config

Overcheck