如何告诉Blazor Webassembly网站的访问者其浏览器不支持Webassembly？

Question

我试用了Blazor Webassembly。我在Visual Studio中创建了一个新的Blazor Webassembly项目。这为我们提供了一个基本的示例项目，其中包含诸如计数器之类的东西，您可以通过单击来增加计数，页面可以读取一些数据，...

当我在最新版本的Firefox中运行它时，它工作正常。

但是后来我想：当我在不支持Webassembly的旧版Firefox中运行它时会发生什么？例如。 2017年的Firefox 50。

它只是显示了这一点。它不会加载。什么都没发生：

查看WebConsole，我发现：

因此Blazor Webassembly应用程序知道它无法在该浏览器中运行，但不会告诉访问者。有没有一种简单的方法可以让我们告诉用户问题出了什么（也许指定了备用HTML文件），而不是撒谎说是“正在加载...”？

Answer 1

根据博客的以下链接：

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

您可以使Blazor开始使用延迟加载，并明确启动Blazor。

这使您只能在当前浏览器支持的情况下进行加载，否则会向用户显示一条消息。

基本上，您需要将以下脚本添加到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>

请注意，第一个脚本应该已经存在，但是您需要确保它使Blazor延迟加载。