Still need cache-busting on CSS file in Blazor WebAssembly site?

user_7453 0
Viewed 1672

I read this but still am having trouble:
I have my Blazor WebAssembly site, with a static index.html file that bootstraps Blazor in a normal way. In its <head>, I have <link href="css/app.min.css" rel="stylesheet" />. That file is built from SCSS using a Dockerfile RUN step on deployment.

According to that issue, I don't need cache-busting URLs, as Blazor will automatically request a fresh one as needed. Yet when I deploy my site and open it in Firefox, I get the old styles and see in Firefox developer tools network tab that app.min.css is retrieved from disk cache. I have to press Ctrl+F5 to get the new styles.

So what is going wrong in this chain? It seems to me that I still need cache-busting URL for my CSS on each deployment. What needs to be set up so that my CSS will be downloaded when the site binaries change, in the way Steve Sanderson suggests in that issue?

blazor-webassembly blazor-client-side browser-cache css
3 Answers

Late to the game on this, but with the new .Net 6 HeadOutlet component, you can now configure this much easier. For my particular case, I was wanting to configure the CSS version from the appsettings.json file (which the value is set a CI/CD build time). To accomplish this, I needed the ability to read from IConfiguration. If this is not a requirement, you can use any C# code at this point to derive your "version". I decided to put this in my App.razor file so that I would only have to configure it once. Here's a snippet of what my App.razor looks like.

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<HeadContent>
    <link href="css/app.css?@(Configuration["BuildNumber"])" rel="stylesheet" />
</HeadContent>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

The small downside with this approach means you'll need to separate the default Blazor CSS styles (if you use them), since this won't be loaded until the Blazor framework takes over the app. Also, don't forget to add the HeadOutlet to your WebAssembly project in Program.cs.

builder.RootComponents.Add<HeadOutlet>("head::after");
user_38256110

My project is a Blazor Wasm .Net 6 project. I've removed the link for the isolated css file(<link href="ProjectName.styles.css" rel="stylesheet"/>) from the head in the index.html file and added the below javascript on that same page. It will now inject the link in the head, with in this case, a version of YYYYMMDDHHMISSsss.

var date = new Date();
var version = date.getFullYear() + ("0" + (date.getMonth() + 1)).slice(-2) + ("0" + date.getDate()).slice(-2) + ("0" + date.getHours() ).slice(-2) + ("0" + date.getMinutes()).slice(-2) + ("0" + date.getSeconds()).slice(-2) + ("00" + date.getMilliseconds()).slice(-3);
if(!document.getElementById('mainCss')) {
    var link = document.createElement('link');
    link.id = 'mainCss';
    link.rel = 'stylesheet';
    link.href = 'ProjectName.styles.css' + "?version=" + version;
    document.head.appendChild(link);
}
user_22367370

Add a style reference to a blazor page that could be cached depending on assembly version and read data from "css/app.min.css" into a blazor page.

user_4872910
Related