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/8.0] [Blazor WASM standalone] Avoid caching index.html during development #59349

Merged
merged 1 commit into from
Jan 9, 2025

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot 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

@github-actions github-actions bot requested a review from a team as a code owner December 5, 2024 22:17
@dotnet-issue-labeler dotnet-issue-labeler bot added the area-blazor Includes: Blazor, Razor Components label Dec 5, 2024
@dotnet-policy-service dotnet-policy-service bot added this to the 8.0.x milestone Dec 5, 2024
@MackinnonBuck MackinnonBuck changed the title [release/8.0] [release/9.0] [Blazor WASM standalone] Avoid caching index.html during development [release/8.0] [Blazor WASM standalone] Avoid caching index.html during development Dec 5, 2024
@MackinnonBuck MackinnonBuck added 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 ask-mode This issue / PR is a patch candidate which we will bar-check internally before patching it. labels Dec 5, 2024
@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
@dotnet-policy-service dotnet-policy-service bot added the pending-ci-rerun When assigned to a PR indicates that the CI checks should be rerun label Dec 19, 2024
@wtgodbe wtgodbe merged commit d92fad8 into release/8.0 Jan 9, 2025
22 of 25 checks passed
@wtgodbe wtgodbe deleted the backport/pr-59348-to-release/8.0 branch January 9, 2025 23:51
@dotnet-policy-service dotnet-policy-service bot modified the milestones: 8.0.x, 8.0.13 Jan 9, 2025
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 pending-ci-rerun When assigned to a PR indicates that the CI checks should be rerun Servicing-approved Shiproom has approved the issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants