Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[release/9.0] [Blazor WASM standalone] Avoid caching index.html during development #59348

Open
wants to merge 1 commit into
base: release/9.0
Choose a base branch
from

Conversation

MackinnonBuck
Copy link
Member

@MackinnonBuck MackinnonBuck commented Dec 5, 2024

Avoid caching index.html during development

Backport of #59340

Fixes an issue where running a Blazor WebAssembly standalone app with hot reload enabled doesn't work if the app had been previously run with hot reload disabled.

Description

Background

The Microsoft.AspNetCore.Components.WebAssembly.DevServer package provides a server for running Blazor WebAssembly standalone apps in development, and it's what gets used by default in new Blazor WebAssembly standalone projects. One of its responsibilities is serving static files, and this includes the app's index.html.

Hot reload functionality depends on an additional <script /> element being dynamically injected into the response for index.html. A development-only middleware provides this behavior.

The problem

The development server was serving index.html with a Cache-Control header that allowed the browser to cache the response. This meant that if the app was initially run with hot reload disabled, the browser would cache a version of index.html without the injected script. After enabling hot reload, the server would not detect that the cached index.html was invalid, because the file on disk had not changed. As a result, the hot reload script injection middleware would be skipped, and the cached response (without the injected script) would be used. This prevented any hot reload functionality from working.

The fix

The fix is simple: change the development server to serve index.html with a Cache-Control: no-store header, which prevents the browser from caching the response. This always gives the script injection middleware a chance to inject the hot reload script.

Fixes #59276

Customer Impact

Customers relying on the dotnet CLI to run their Blazor WebAssembly standalone app are very likely to encounter this issue. The problem can be reproduced by first running the app using dotnet run, then subsequently with dotnet watch. While less common, the bug can also be reproduced in Visual Studio by explicitly disabling hot reload, running the app, then re-enabling hot reload.

Workarounds do exist:

  • Make an arbitrary change to index.html so that the server recognizes that the file has changed
  • Clear the browser cache between runs

However, the user may not be aware of these workarounds, and being forced to manually clear the browser cache creates a frustrating development experience.

Note

Only Blazor WebAssembly standalone apps are affected. The bug does not reproduce on other types of Blazor apps (Web, Server, Hybrid).

Regression?

  • Yes
  • No

This bug has existed since .NET 6, and possibly earlier than that.

Risk

  • High
  • Medium
  • Low

The change is small and only impacts how the index.html file is served during development.

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

@MackinnonBuck MackinnonBuck added area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly feature-hot-reload This issue is related to the Hot Reload feaature labels Dec 5, 2024
@MackinnonBuck MackinnonBuck requested a review from a team as a code owner December 5, 2024 21:56
@dotnet-policy-service dotnet-policy-service bot added this to the 9.0.x milestone Dec 5, 2024
@MackinnonBuck MackinnonBuck added the ask-mode This issue / PR is a patch candidate which we will bar-check internally before patching it. label Dec 5, 2024
@MackinnonBuck
Copy link
Member Author

/backport to release/8.0

Copy link
Contributor

github-actions bot commented Dec 5, 2024

Started backporting to release/8.0: https://github.com/dotnet/aspnetcore/actions/runs/12188985946

@pavelsavara
Copy link
Member

cc @maraf we have another copy of this code, right ?

@mkArtakMSFT mkArtakMSFT added Servicing-approved Shiproom has approved the issue and removed ask-mode This issue / PR is a patch candidate which we will bar-check internally before patching it. labels Dec 12, 2024
Copy link
Contributor

Hi @MackinnonBuck. This PR was just approved to be included in the upcoming servicing release. Somebody from the @dotnet/aspnet-build team will get it merged when the branches are open. Until then, please make sure all the CI checks pass and the PR is reviewed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly feature-hot-reload This issue is related to the Hot Reload feaature Servicing-approved Shiproom has approved the issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants