How to tell visitors of a Blazor Webassembly website that their browser doesn't support Webassembly?

Question

I tried out Blazor Webassembly. I created a new Blazor Webassembly project in Visual Studio. That gives us a basic example project with stuff like a counter you can increment by clicking, a page that fetches some data, ...

When I run it in the newest version of Firefox, it worked fine.

But then I thought: What happens when I run it in an old version of Firefox that has no Webassembly support?? E.g. Firefox 50 from 2017.

It just shows this. It does not load. Nothing else happens:

Looking into the WebConsole I found this:

So the Blazor Webassembly app knows that it can't run in that browser but does not tell the visitor. Is there an easy way for us to tell the user what the problem is (maybe specifying an alternative HTML file) instead of lying that something is "Loading..."?

Answer 1

According to the blog at the following link:

https://medium.com/@waelkdouh/how-to-detect-unsupported-browsers-under-a-blazor-webassembly-application-bc11ab0ee015

You can make Blazor start using lazy loading, and explicitly start Blazor.

This enables you to only load if the current browser supports it, otherwise display a message to the user.

Essentially you need to add the following script to the Index.html:

    <!--prevent autostarting-->
<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>

    //check if webassembly is supported
    const webassemblySupported = (function () {
        try {
            if (typeof WebAssembly === "object"
                && typeof WebAssembly.instantiate === "function") {
                const module = new WebAssembly.Module(
                    Uint8Array.of(0x0, 0x61, 0x73, 0x6d,
                        0x01, 0x00, 0x00, 0x00));
                if (module instanceof WebAssembly.Module)
                    return new WebAssembly.Instance(module)
                        instanceof WebAssembly.Instance;
            }
        } catch (e) {
        }
        return false;
    })();

    // Modern browsers e.g. Microsoft Edge
    if (webassemblySupported) {
        Blazor.start({});
    }
    // Older browsers e.g. IE11
    else {
        window.location = window.location + "BrowserNotSupported.html";
    }

</script>

Note the first script should already exist but you need to make sure it is making Blazor load lazily.