Blazor WASM PWA not returning static files from wwwroot on first request after publish due to service worker cache

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I have a image placed inside wwwroot\images\image.png in my blazor wasm app. After publishing, when I request the image for the first time in browser with URL https://localhost/images/image.png browser gets 404 response. Now if I press Shift + F5 the image is getting served in browser. I think blazor routing has some issues with explicit static file request handling. I’m not sure. Please can anyone assist me?

Expected Behavior

The requested static file from wwwroot\images\image.png should be served instead of 404 or without pressing Shift + F5

Steps To Reproduce

1. Create new .net 6 blazor wasm app.
2. Add a image file inside wwwroot\images\image.png.
3. Publish the app.
4. Now run the published version and request the image.png via https://localhost:port/images/image.png.
5. You should get 404 in browser.
6. Now press Shift + F5, image will be served.

Exceptions (if any)

No response

.NET Version

6.0.101

Anything else?

.NET SDK (reflecting any global.json):
 Version:   6.0.101
 Commit:    ef49f6213a

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.22000
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.101\

Host (useful for support):
  Version: 6.0.1
  Commit:  3a25a7f1cc

.NET SDKs installed:
  6.0.101 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
  https://aka.ms/dotnet-download

[fingers10]

@javiercn and @brischt I have made below changes in the service-worker.js

From this,

const shouldServeIndexHtml = event.request.mode === 'navigate';

to this,

const shouldServeIndexHtml = event.request.mode === 'navigate' && new URL(event.request.url).pathname === '/';

This now loads the correct content without force reload. @javiercn Please can you help to validate. The issue seems to be closed without resolution.

[javiercn]

@fingers10 I would suggest you check the response here:

It seems that its coming from the service worker installed in the app, so I would check the service worker code to understand what’s happening.

It can be that somehow the image isn’t being correctly cached by the service worker or that a new version of the service worker needs to be updated on the browser and that’s why you are observing this behavior.

You might need to update your logic in https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/service-worker.published.js#L41-L59