Fix CSS Hot Reload on iOS device

[spadapet]

Description of Change

This fixes a bug with:

• MAUI Blazor Hybrid apps
• Open in Visual Studio 2022
• Using Pair to Mac to debug on a Mac
• Hot reload CSS on iOS Simulator

Hot reloading CSS didn't work because the web view on iOS didn't refresh the CSS since the href didn't change. The CSS link looks like:

• <link rel="stylesheet" href="app.css" />

And when the CSS file changed, the href was modified by adding an empty string to it. The browser in iOS didn't detect any change in the href (since the change was a no-op) and didn't refresh the CSS. On Windows and Android the browser would still refresh CSS when the href had a no-op change.

My fix is to make a real change to the CSS link's href by appending a query string with a timestamp to it. Now all the browsers refresh the CSS since the timestamp is always unique.

Issues Fixed

Bug 1821555: [XVS][MAUI] CSS Hot reload on iOS Simulator not working

[Copilot]

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

src/BlazorWebView/src/SharedSource/StaticContentHotReloadManager.cs:32

• Ensure that there is a test case verifying that the CSS reloads correctly with the new timestamp query string.

allLinkElems.forEach(elem => elem.href = elem.href.split('?')[0] + '?reload_version=' + Date.now());

[spadapet]

Ping for code review: @dotnet/dotnet-maui-blazor-eng

[spadapet]

@Redth , @lewing , thanks for reviewing my other CSS hot reload PR (#27788).
Can you review this one too?

Appending an empty string is not enough to force CSS to be reloaded, the new URL needs to be unique, so a timestamp is appended. Thanks!

[mattleibow]

Is there ever a case where the css would have a query string already?

Also, this looks to be getting all css, what happens with CDNs and things like that? Will that refresh all remote ones too?

[spadapet]

Is there ever a case where the css would have a query string already?

Also, this looks to be getting all css, what happens with CDNs and things like that? Will that refresh all remote ones too?

Good questions. For the CSS files that can be hot reloaded, those are static files and shouldn't have a query string. But your second comment about refreshing all CSS files (even remote ones) is right. That isn't a new problem introduced by this PR, but it was there and I'm touching that code, so I'll see if the refresh can somehow be scoped to what actually changed.

[spadapet]

Ah, @mattleibow looks like refreshing every CSS file was done on purpose:

So I think I either:

• Just do a filename match for each CSS file and deal with occasional false positives
• Fix up the query string with a timestamp in a smarter way that preserves other parameters, in case all CSS files still need to be refreshed

[mattleibow]

Doesn't the browser have a something to update query strings? Like, if the param exists, then update else add?

Edit

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

// Add a third parameter.
params.set("baz", 3);
params.toString(); // "foo=1&bar=2&baz=3"

[spadapet]

Doesn't the browser have a something to update query strings? Like, if the param exists, then update else add?

Yes, I'm about to push my changes that seem to solve the issues:

• Add or update a timestamp parameter without affecting others
• Only refresh CSS files that match the filename of the one that changed. This should be way more efficient than reloading all CSS files, with rare false positives.