Maui Blazor image cache is not working

[romanov]

Description

Hello!
When navigating beetween the pages, you see the refresh (blink) of the images (static, or background).

Manifest (or serviceworker) cache is not helping.

Steps to Reproduce

1. Create MAUI Blazor App
2. Add any static (wwwroot) images to any other page
3. Navigate to that page
4. Navigate back to the homepage
5. Navigate to that page again and u still see blinking

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

I was not able test on other platforms

Affected platform versions

Android (Emulator and real device)

Did you find any workaround?

No

Relevant log output

No response

[javiercn]

@romanov thanks for contacting us.

Does the same webview instance survive across navigations?

[ghost]

Hi @romanov. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[romanov]

@romanov thanks for contacting us.

Does the same webview instance survive across navigations?

How to check it? It's default MAUI Blazor template with default BlazorWebView

[javiercn]

@romanov put a static counter variable in your blazor app, increment it every time index is rendered and display the results. That's a good proxy to determine if the blazor webview component is being recreated

[ghost]

Hi @romanov. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[romanov]

What is the best method to put the counter's incementation?

protected override async Task OnInitializedAsync() or OnInitialized?

Is it right for a blazor page? Or they call everytime on navigation?

I've just tested a blank new MAUI Blazor template and added image to the second view. Same reload.

[javiercn]

@romanov OnInitialized within the Main.razor is an appropriate place to do this, since only runs once.

Essentially what we are looking for is to see if this is happening because BlazorWebview is being created multiple times or if the webview component is doing something weird.

[ghost]

Hi @romanov. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[GhostKilllaX]

Same problem and OnInitialized gets called only once (platform windows tho)

[GhostKilllaX]

HTTP Interaction of getting a image via BlazorWebView on MAUI:

Duration 160ms

I also noticed it beeing really slow? On Blazor Server the image load (even when cache is disabled) is 40x faster.

HTTP Interaction made via Blazor Server (cached):

Duration 3ms

HTTP Interaction made via Blazor Server (forced no chache)

Duration 4ms

[javiercn]

@mkArtakMSFT moving this to .NET 7.0 for consideration. Will this show up in our planning meetings?

[GhostKilllaX]

For Windows this long image loading only happens when using the packaging format msix.
Running the .exe generated by msbuild /restore /t:Publish /p:TargetFramework=net6.0-windows10.0.19041 /p:configuration=release /p:WindowsAppSDKSelfContained=true /p:Platform=x64 /p:PublishSingleFile=true gets the loading time of the image back to 3ms.
Tho still no caching in place for the http request.

[mkArtakMSFT]

After a short discussion we've decided to remove the no-store header value.

[TonyHenrique]

I am also observing this problem.
I have a MAUI Blazor App and a similar scenario, tested:
On Android and Windows: After the user clicks on a link and Blazor performs the navigatiton, when the page load, the images blink (disappear and appear quickly);
On the Web App version there is no (noticeable) blink.
On iPhone and/or mac: [I don't have (yet) an iPhone nor mac to test.]

I am preparing a Proof-of-concept app for a large company to replace React and React Native, and this blink of the images between the page navigation is not helping with the presentation.
@mkArtakMSFT @javiercn , when will the fix be available (released on Visual Studio installation)?

dotnet workload list

ID da carga de trabalho instalada      Versão do Manifesto      Origem da Instalação
------------------------------------------------------------------------------------
maui-windows                           7.0.81/7.0.100           VS 17.6.33617.297
maui-maccatalyst                       7.0.81/7.0.100           VS 17.6.33617.297
maccatalyst                            16.2.2054/7.0.100        VS 17.6.33617.297
maui-ios                               7.0.81/7.0.100           VS 17.6.33617.297
ios                                    16.2.2054/7.0.100        VS 17.6.33617.297
maui-android                           7.0.81/7.0.100           VS 17.6.33617.297
android                                33.0.46/7.0.100          VS 17.6.33617.297
wasm-tools-net6                        7.0.5/7.0.100            VS 17.6.33617.297
wasm-tools                             7.0.5/7.0.100            VS 17.6.33617.297

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro with existing sample code. recipeSearch-main.zip

[alexyakunin]

Same issue. And IDK how you guys think it's ok to "release" Blazor Hybrid with this.

[TonyHenrique]

Please prioritize this for the upcoming .NET 8 preview 7 release, because it will be useful in some very common scenarios when using MAUI Blazor instead of competitor technologies. And this image (re)loading/blink behaviour between navigations is breaking the user experience.
I think that it is related to adjust the Cache-Control header value on the Android, iOS, Windows platform versions of the MAUI App.
@mkArtakMSFT @javiercn

[TonyHenrique]

I have just tested it now with MAUI Version 8.0.0-rc.1.9171 , .NET SDK 8.0.100-rc.1.23455.8 and the issue persists here:

The image served locally blinks when navigating pages.
I also tested with an image being served from internet and it does not blink.

@mkArtakMSFT is the no-store header value being sent when serving the images locally?

[Tysony1982]

So any work arounds for this? I have an application rendering many images in a list and the page load is terrible.

[mkArtakMSFT]

The work we do dotnet/aspnetcore#52824 should simplify this for us. But for now, moving to Backlog.

[domagojmedo]

This is really not a good look for blazor hybrid TBH, showing local images is like the most basic scenario you can have in app.
It's been 2 years since this was reported

[Kebechet]

yes, we also have Maui hybrid in production and this really hurts the overall feel of the app

[Kebechet]

@mkArtakMSFT is there a chance this will be resolved in some .NET 9 patch release ?

[TonyHenrique]

It would be great to see this fixed.