Hydrated bloc state lost after deploying updates to web app

[JakesMD]

Description
Whenever I deploy an update to my web app, the bloc state is lost.

Steps To Reproduce

HydratedBloc.storage = await HydratedStorage.build(
    storageDirectory: HydratedStorage.webStorageDirectory,
  );

1. Deploy the web app. (e.g. the counter example)
2. Open the app and make changes to the state in the app (e.g. increment a counter)
3. Deploy a new version of the app.
4. Make sure the your using the updated version of the app.
5. The state from step 2 is lost.

Expected Behavior
The state should persist no matter if push an update.

I'm guessing this is because the HydratedStorage.webStorageDirectory is just cache which gets deleted on an update. But I would expect the default webStorageDirectory to persist.

Additional Context
I'm using hydrated bloc to persist the theme mode, language settings as well as recently viewed items.

[felangel]

Hi @JakesMD 👋
Thanks for opening an issue!

Does the issue persist when you upgrade to the latest stable version of hydrated_bloc (v10.0.0)?

[JakesMD]

Hi! Good point! I missed the update you released a couple hours ago. Will get back asap...

[JakesMD]

I works! 🥳 Thanks!

[JakesMD]

Sorry 🙈 I just released another update to my app and the state was lost again.

[JakesMD]

Tomorrow I'll have a go at hosting the counter example app and seeing if I can reproduce the issue that way. That would prove whether this really is a hydrated_bloc issue.

[felangel]

How are you deploying updates? Sorry for the inconvenience!

[JakesMD]

Hi! Can confirm: this is reproducible with the counter example. You tend to lose state when you include a new package.

Steps to reproduce

1. Create/clone the hydrated_bloc example.
2. Create a Firebase hosting project and link the app to it.
3. Build the release app with flutter clean && flutter build web --release.
4. Deploy the app with firebase deploy.
5. Open the deployed app in your browser and press some buttons.
6. Repeat x times:
   1. Bump the app version in pubspec.yaml.
   2. Rename the app bar title to Counter [VERSION].
   3. Build the release app with flutter clean && flutter build web --release.
   4. Deploy the app with firebase deploy.
   5. Reload the deployed app until your browser finally runs the new version with the changed app bar title.

That works perfectly. The state is always persisted.

Now do this:

1. Bump the app version in pubspec.yaml.
2. Rename the app bar title to Counter [VERSION].
3. Add a new package to pubspec.yaml. I used flutter_confetti.
4. Add the new package somewhere in the app. I did this:

       FloatingActionButton(
           child: const Icon(Icons.add),
           onPressed: () {
             Confetti.launch(context,
                 options: const ConfettiOptions(
                     particleCount: 100, spread: 70, y: 0.6));
             context.read<CounterBloc>().add(CounterIncrementPressed());
           },
         ),

5. Build the release app with flutter clean && flutter build web --release
6. Deploy the app with firebase deploy
7. Reload the deployed app until your browser finally runs the new version with the changed app bar title.

Voila, your state was lost. Or at least parts of it. When I added flutter_confetti I lost the brightness, when I add signed_spacing_flex I lost all the state.

I tested this on MacBook Safari and Android Chrome.

[felangel]

@JakesMD thanks for the update and detailed reproduction steps! Are you able to share the Flutter version you're using? I'll try to reproduce shortly 👍

[JakesMD]

Stable 3.27.1

[JakesMD]

Hi! I've been playing around and have discovered some important points:

• The issue occurs after a significant change to the widget tree (more than just changing the app bar title)
• You can make the app fetch OLD state:
  • Increment the counter to 6 and set brightness to dark
  • Duplicate one of the floating action buttons, update, build and deploy
  • The counter is now 0 and the brightness is light
  • Increment the counter a few times to change the state
  • Remove the duplicate floating action button, update, build and deploy
  • The counter is now 6 again and brightness is dark

[felangel]

Hi! I've been playing around and have discovered some important points:

• The issue occurs after a significant change to the widget tree (more than just changing the app bar title)

• You can make the app fetch OLD state:

  • Increment the counter to 6 and set brightness to dark
  • Duplicate one of the floating action buttons, update, build and deploy
  • The counter is now 0 and the brightness is light
  • Increment the counter a few times to change the state
  • Remove the duplicate floating action button, update, build and deploy
  • The counter is now 6 again and brightness is dark

Thanks for all the context! I'm digging into this now 👍

[felangel]

I was able to reproduce and I was able to resolve this by changing my firebase hosting configuration to use:

"public": "build/web",

instead of

"source": "."

This way the firebase-deploy command doesn't actually run the flutter build step. Then I ran flutter build web --pwa-strategy=none to disable the service worker and I was able to add new packages without losing my cached state.

Let me know if that helps and apologies for the delayed response!

[JakesMD]

Seems to be fixed 👍 It works when you make different changes to the app on every update (which will be 99% of the time). But when you revert changes it loads old state again.

My firebase config was already set to "public": "build/web".

After building with --pwa-strategy=none I was unable to make the app load the new version. So I set the max cache age to 60s in firebase.json:

  "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=60"
          }
        ]
      }
    ]

I've only tested this with the counter example and have yet to try it with the production app.

[felangel]

Seems to be fixed 👍 It works when you make different changes to the app on every update (which will be 99% of the time). But when you revert changes it loads old state again.

My firebase config was already set to "public": "build/web".

After building with --pwa-strategy=none I was unable to make the app load the new version. So I set the max cache age to 60s in firebase.json:

"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=60"
}
]
}
]
I've only tested this with the counter example and have yet to try it with the production app.

Can you try unregistering the service worker manually? I need to dig into what the generated service worker is doing but I’d check if a brand new app/deployment has the same issues.

[Rexios80]

Can you try the code here and see if anything changes?

IO-Design-Team/hive_ce#74