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

Question

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

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

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

它只是说明了这一点。它不加载。没有其他事情发生：

查看 WebConsole 我发现了这个：

所以 Blazor Webassembly 应用程序知道它不能在该浏览器中运行但不会告诉访问者。有没有一种简单的方法可以让我们告诉用户问题出在哪里（也许指定一个替代 HTML 文件）而不是谎称某些东西正在“加载...”？

Answer 1

根据以下博客 link:

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 延迟加载。

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

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

c#

browser

webassembly

blazor

blazor-webassembly