Blazor WebAssembly 3.2.0 Release Candidate now available

Daniel Roth

Daniel

The Blazor WebAssembly Release Candidate is here! This release contains all of the features and improvements that we expect to release for the upcoming Blazor WebAssembly release. There are no more breaking changes planned at this point. Please give the Blazor WebAssembly Release Candidate a try and let us know what you think!

Here’s what’s new in this release:

  • Custom boot resource loading
  • API reference docs

Get started

To get started with Blazor WebAssembly 3.2.0 Release Candidate, install the latest .NET Core 3.1 SDK.

NOTE: Version 3.1.201 or later of the .NET Core SDK is required to use this Blazor WebAssembly release! Make sure you have the correct .NET Core SDK version by running dotnet --version from a command prompt.

Once you have the appropriate .NET Core SDK installed, run the following command to install the updated Blazor WebAssembly template:

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

If you’re on Windows using Visual Studio, we recommend installing the latest preview of Visual Studio 2019 16.6. For this preview, you should still install the template from the command-line as described above to ensure that the Blazor WebAssembly template shows up correctly in Visual Studio and on the command-line.

That’s it! You can find additional docs and samples on https://blazor.net.

Upgrade an existing project

To upgrade an existing Blazor WebAssembly app from 3.2.0 Preview 5 to the 3.2.0 Release Candidate:

  • Update all Microsoft.AspNetCore.Components.WebAssembly.* package references to version 3.2.0-rc1.20223.4.
  • Update any Microsoft.AspNetCore.Components.WebAssembly.Runtime package references to version 3.2.0-rc1.20222.2 (having a reference to this package is uncommon).
  • Update all System.Net.Http.Json package references to 3.2.0-rc1.20217.1

You’re all set!

Custom boot resource loading

When a Blazor WebAssembly app loads in the browser, it first downloads all of the required boot resources from the server, including the .NET runtime, the bootstrapping JavaScript code, locale specific data, and the .NET assemblies that make up the app. You can now customize how these boot resources are loading using the loadBootResource API. You can use this API to make any needed modifications to how these specific outbound requests are constructed. For example, you might want to load some of the resources from an external CDN. Although Microsoft does not currently host the Blazor framework files on any specific public Content Delivery Network (CDN), you are free to add them to your own CDN if you wish. For example, if you have published the _framework\wasm files to a CDN within the base URL https://mycdn.example.com/blazorwebassembly/3.2.0-rc1/, then you could configure your application to use those resources as follows:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start({
        loadBootResource: function (type, name, defaultUri, integrity) {
            console.log(`Will load '${type}' with name '${name}' from URI '${defaultUri}' and integrity '${integrity}'`);

            switch (type) {
                case 'dotnetjs':
                case 'dotnetwasm':
                case 'timezonedata':
                    return `https://mycdn.external.cdn/blazorwebassembly/3.2.0-rc1/${name}`;
            }

            // Other types are 'assembly' and 'pdb' but you probably wouldn't want to fetch those from a CDN as they would be custom-linked for your app
            // By returning undefined for other types, we let the framework use its normal strategy for those types
        }
    });
</script>

If you want to customize more than just the URLs that are being used, then your loadBootResource function can call fetch directly and return the result. For example:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start({
        loadBootResource: function (type, name, defaultUri, integrity) {
            // Adds a custom HTTP header to the outbound requests
            // To retain the default integrity checking behavior, it's necessary to pass through the 'integrity' parameter
            return fetch(defaultUri, { 
                cache: 'no-cache',
                integrity: integrity,
                headers: { 'MyCustomHeader': 'My custom value' }
            });
        }
    });
</script>

API reference docs

API reference docs for the Blazor WebAssembly namespaces (Microsoft.AspNetCore.Components.WebAssembly.*) are now available in the .NET API browser as part of the ASP.NET Core 3.1 API docs.

Known issues

  • When publishing a ASP.NET Core hosted Blazor WebAssembly app using Visual Studio, satellite assemblies from the client application do not get copied to the publish folder.

    This issue will be addressed in the upcoming release. To workaround this issue, publish the app from the command line using dotnet publish.

Feedback

This is our last planned preview release of Blazor WebAssembly 3.2! We need your help to make sure that we’ve addressed any remaining blocking issues for the upcoming release. Please give it a try and let us know what you think by filing issues on GitHub.

We hope you enjoy the Blazor WebAssembly Release Candidate and thanks for trying out Blazor!

91 comments

Comments are closed. Login to edit/delete your existing comments

  • Avatar
    masoud moghaddam

    What is this error?

    Failed to find a valid digest in the 'integrity' attribute for resource 'https://4sat.4100sat.com/index.html' with computed SHA-256 integrity 'F0cOY0YuSHsALIyroBPSwqnJ+cy4LiXDEPOw9NCG39w='. The resource has been blocked.
    Unknown error occurred while trying to verify integrity.
    service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
    • Daniel Roth
      Daniel RothMicrosoft employee

      Hi Masoud. When a Blazor WebAssembly app is built, the hashes of all the built files are saved in a manifest file, which is then used for caching purposes and to do resource integrity checks. This error could mean that the hashes were no longer valid after deploying the app, or some other error happened when trying to retrieve the file. Was index.html successfully deployed to the server? Was it perhaps modified after it was deployed?

      • Avatar
        Matteo Locher

        I am having the same error with my favicon.ico file? And also with one of my js files. But also if I run on a local machine with Visual Studio. I am 100% sure the files are not change…because all I did i press F5. Any suggestion how to debug this?

  • Ben Hayat
    Ben Hayat

    Hi Dan;

    Once the GA WASM version is released in May, what would be the life cycle of Blazor Server Side from May to .Net 5 release time frame?
    Thanks!
    ..Ben

    • Daniel Roth
      Daniel RothMicrosoft employee

      Hi Ben. Once Blazor WebAssembly is released we will shift our focus to .NET 5. We will add Blazor WebAssembly to .NET 5 (we hope to have this done by June) and then start work on a variety of Blazor improvements. We have a list of the main improvements we are considering listed here: https://github.com/dotnet/aspnetcore/issues/21514. Please note that this list is still aspirational and subject to change.

      • Ben Hayat
        Ben Hayat

        Hi Dan;

        Thank you for being transparent and always giving clear answers. It means a lot to us to plan according.
        ..Ben

  • Fernando Roman Capparelli
    Fernando Roman Capparelli

    Hello, thanks for the RC,
    I would like to know something, I’m developing a Blazor Wasm app, and when I have to make long request, the UI is not responding after some time. The process on backend is still runnig, but UI never receive the response. Is this an issue?

    Thanks
    I’ll appreciate any answer,

    Fernando

      • Fernando Roman Capparelli
        Fernando Roman Capparelli

        Hi Daniel, the thing is when I make a request from blazor wasm to the API, I always show a modal, letting know the user that something is happening on the backend, a normal user experience process.
        But when the api take more time (than usual), because the process on backend is more complex, the modal I mentioned before, just disappear, and the response never return and actually the process on the API finish, but I don´t receive the response in the blazor wasm side.
        Is like blazor UI just crash, and the is no error on the browser console neither, so I don’t no know what’s happening.
        I’ve tried using sync and async methods, but cannot resolve it.

        Thanks for the answer before,

        Fernando

        • Fernando Roman Capparelli
          Fernando Roman Capparelli

          I found the issue, it was related to the TimeOut property of HttpClient

          • Daniel Roth
            Daniel RothMicrosoft employee

            Hi Fernando. I’m glad you were able to resolve your issue! It sounds like this error condition could be improved to make it easier to debug and diagnose. It would be great if you could file a GitHub issue on that if you haven’t already!

  • Avatar
    Masoud Moghaddam

    hi daniel
    im use Blazor WebAssembly 3.2.0 Preview 5 release now available core hosting
    and deploy on IIs
    but i see error :

    An SSL certificate error occurred when fetching the script.
    4sat.4100sat.com/:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://4sat.4100sat.com/') with script ('https://4sat.4100sat.com/service-worker.js'): An SSL certificate error occurred when fetching the script.
    blazor.webassembly.js:1 GET https://4sat.4100sat.com/_framework/_bin/System.Runtime.CompilerServices.Unsafe.dll net::ERR_HTTP2_PROTOCOL_ERROR
    e.loadResourceWithoutCaching @ blazor.webassembly.js:1
    e.loadResource @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    e.loadResources @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    c @ blazor.webassembly.js:1
    (anonymous) @ VM328:1
    (anonymous) @ blazor.webassembly.js:1
    start @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    s @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    s @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    v @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    blazor.webassembly.js:1 GET https://4sat.4100sat.com/_framework/_bin/System.Runtime.Serialization.dll net::ERR_HTTP2_PROTOCOL_ERROR
    e.loadResourceWithoutCaching @ blazor.webassembly.js:1
    e.loadResource @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    e.loadResources @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    c @ blazor.webassembly.js:1
    (anonymous) @ VM328:1
    (anonymous) @ blazor.webassembly.js:1
    start @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    s @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    s @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    v @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    blazor.webassembly.js:1 Error: Failed to start platform. Reason: TypeError: Failed to fetch
        at blazor.webassembly.js:1
        at blazor.webassembly.js:1
        at Object.throw (blazor.webassembly.js:1)
        at u (blazor.webassembly.js:1)

    What should I do now?

    • Avatar
      Tim B

      I get this issue also. Both behind IIS (when using the local dev ssl cert) and also if i publish to a folder and then

      dotnet myservice.dll

      if i access using https://localhost:5001 the browser tells me the certificate isn’t valid but lets me proceed anyway.

      i can see this error in the console

      Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://localhost:5001/') with script ('https://localhost:5001/service-worker.js'): An SSL certificate error occurred when fetching the script.
      • Daniel Roth
        Daniel RothMicrosoft employee

        My best guess is that there is an issue with the certificate for the site. Is the certificate correctly setup to be trusted?

  • Igr Alexánder Fernández Saúco
    Igr Alexánder Fernández Saúco

    Hello Daniel,
    I am updating to this RC1, but I run into a problem with the NavigationManager. My guess is that this issue is related with a wrong reference. I only have reference to RC1 packages.

    I think the problems comes from here, but not sure.

    I’m the author if this lib https://github.com/WildGums/Blorc.OpenIdConnect and I updated the reference but sure what I’m doing wrong.

    The fact is this NavigationManager.NavigateTo is not working for me.

    • Igr Alexánder Fernández Saúco
      Igr Alexánder Fernández Saúco

      Sorry, I found issue. Is related with Serilog.Sinks.BrowserHttp package.

  • Евгений Тим
    Евгений Тим

    Hello, thanks for the RC,

    We are going to use Blazor Wasm to demonstrate benefits our library (to write demo samples).

    I’am have develop a prototype (https://oygan.github.io/blazor/counter). But hosted application sometimes shows an error with the page reload request. Why Blazor app showing this error?

    thnks for your hard work!

  • Avatar
    dionisio luis

    Good Morning Daniel,
    I’m having issues with the PWA – Integrity Check.
    I’m using the latest version: 3.2.0.

    I’ve noticed that several people have this issue with the Integrity Check, and there is already tickets created on github, its ‘bug’ on the blazor or its just some of us that didnt manage to do it right ? or what are the solutions ?

    For me to bypass this situation im changing the code for: .map(asset => new Request(asset.url)) to bypass integrity .

    I’m trying first on my machine before deploying to the server machine to be easy to debug any issue.

    <

    p>On my Client.csproj i commented the code, just to be sure that this was not the issue.

     
     ItemGroup Condition="$(DesignTimeBuild) != 'true'">
        Content Remove="wwwroot\service-worker.js" />
        Content Update="wwwroot\service-worker.published.js" Link="service-worker.js" />
    
        Content Remove="wwwroot\index.html" />
        Content Update="wwwroot\index.published.html" Link="wwwroot\index.html" />
      /ItemGroup>
    

    –Some of the errors, I’ve more connected to the Integrity .
    Failed to find a valid digest in the ‘integrity’ attribute for resource ‘http://localhost:65364/manifest.json’ with computed SHA-256 integrity ‘9OTspAh6An7Awq5npYH73lliGm7RGgqTsse+MacJ1TU=’. The resource has been blocked.

    Failed to find a valid digest in the ‘integrity’ attribute for resource ‘http://localhost:65364/_content/Syncfusion.Blazor/styles/bootstrap4.css’ with computed SHA-256 integrity ‘UJR48OuCvN+1xUqj8gDVm+A3rAxZi7aaGK+wJRHfjlA=’. The resource has been blocked.

    • Daniel Roth
      Daniel RothMicrosoft employee

      Hi Dionisio. This error can happen for various reasons. The first thing to verify is that the files deployed are exactly the same as the files that were built and published. If they are modified in any way when publishing, then the file hash will change and the integrity check will fail. For example, we’ve seen some cases where newline characters in the files were getting modified for specific publishing flows. But this error can also happen when the file fails to download. For example, maybe the file wasn’t published at all or something is blocking the download of the file. Check to make sure that the file can actually be independently downloaded using the browser. If everything seems to be setup right and the file can be successfully downloaded, but the integrity check still fails, then please open an issue on GitHub and we’ll investigate.

  • Avatar
    Stefan Fjällemark

    Hello guys.
    Thanks for a great product. I have two requests for the further releases:
    – Run your Code Analysis and nullable enabled and fix your templates before they make it into Visual Studio. I get a long list of warnings that I’m not sure of the effect if i fix them. Better you decide what to fix and what to supress that so that compilation is free from warnings as a baseline to start with.
    – Make all scaffolded code (for example the ASP.NET Identity pages) localizable from start using the IStringLocalizer. Its a great advantage if we can translate scaffolded pages without touching the scaffolded source code.

  • Avatar
    Sergei Y.Kitáev

    Good day!
    In previous article
    https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/
    there were some instructions concerning corrections in ASP.NET Core 3.0 project: Before / After (UseClientSideBlazorFiles, MapFallbackToClientSideBlazor etc.). This time, having some problems with Blazor templates in RC, I need analogical instructions for migration from Preview 6 to WebAssembly 3.2.0 Release Candidate. Please, add explanation into Upgrade an existing project block — key steps in correction of ASP Web-server (for Blazor-WASM). Also any link to fresh sources (RC) of Weather Forecast sample could be helpful.
    Thanks!

    • Daniel Roth
      Daniel RothMicrosoft employee

      Hi Sergei. It probably would be easiest to create new Blazor WebAssembly app with the latest release and then compare the template code with what you have to figure out what migration steps you might still be missing.

      • Avatar
        Sergei Y.Kitáev

        Good day, Daniel!
        Naturally, what you are proposing is the first that comes into mind. But…
        1. Here it this post I am talking about Server project for WASM-Client. Therefore “wasmblazor”-sample template does not help. Yes, it is fresh (Include=”Microsoft.AspNetCore.Components.WebAssembly” Version=”3.2.0-rc1.20223.4″), but it contains WASM-Client only.
        2. Usage of complex sample named “blazorhosted” (Client+Server+Shared) leads to some strange result, on two different machines with .NET Core 3.1.4 and SDK 3.1.202. On the first machine I have, as it seems to me, something very old (Include=”Microsoft.AspNetCore.Blazor.Server” Version=”0.7.0″ in server project). On the second computer with fresh .NetCore+SDK — “blazorhosted”-sample template does not exist.
        That is why new WebAssemply app. is not the solution (because of secret server-side).
        In both cases the templates were installed by “dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4” command.
        I’ve also cleaned all previews on the first machine: “dotnet-core-uninstall remove –sdk –all-previews”.
        Please, recommend something proper in this situation.
        Thanks!

        • Daniel Roth
          Daniel RothMicrosoft employee

          Hi Sergei. Please note that Blazor WebAssembly has now shipped as part of the latest .NET Core 3.1 SDK: https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/. The version of the SDK you need is 3.1.300, which you can install from here: https://dotnet.microsoft.com/download. If you have the correct version of the SDK, you don’t need to separately install the Blazor WebAssembly template anymore – it’s included with the SDK. Once you’ve installed the correct version of the SDK, you can verify that it installed correctly by running dotnet --version, which should return “3.1.300”. With 3.1.300, you should be able to create a new ASP.NET Core hosted Blazor WebAssembly app without issue.