Blazor webassembly 应用程序和检测浏览器功能

Question

我是 Blazor/WebAssembly 的新手，喜欢这项技术，但不了解某些实施细节背后的原因。

例如，如果用户使用不支持 WebAssembly（即 IE 11）的浏览器导航到由 Visual Studio 向导创建的客户端 Blazor/WebAssembly 应用程序，该网站将只显示

Loading...

永远。

原因很清楚，但微软为什么要这样实现呢？尝试检测浏览器是否支持 WebAssembly，如果不支持，将用户重定向到另一个解释原因的静态页面（即 "Your browser does not support WebAssembly, please use Chrome v. XX or above, Edge v. XX or above, etc")?

Answer 1

我不是微软的员工，但在我看来，他们这样做是出于以下原因。

a) MS 是为开发人员提供支持的工具和技术的提供商。因此，他们不会为开发人员决定做什么。他们通常不创建 "opionated" 框架。用 "unsupported" 显示消息是他们的明确意见。让所有客户都收到该消息是没有意义的。如果有人愿意在 IE11 上进行这项工作并且他们阻止了他们怎么办？

b) 像那样实施它需要零努力。这本身就是好处。如果他们心中有防弹解决方案，我毫不怀疑他们是否会实施它，如果他们想要支持的话。现在，由于它不受支持，开发人员有责任为最终用户提供适当的用户体验。由开发人员决定如何处理 IE。提供不支持 IE11 的声明消息，添加像 https://github.com/Daddoon/Blazor.Polyfill 这样的 poilyfills 以在一定程度上支持 IE11，或者切换到不同的技术。如果 MS 会给出显示消息的解决方案，它需要其他想要 polyfill 的开发人员，或者切换到不同的技术来主动禁用此类检查，并且需要实现更多的活动部分，仅供 unsuppported平台。这根本就没有意义。

c) 对 IE11 的支持要求正在下降，投资支持这个市场可能不值得他们关注。 WebAssembly 的技术还不够成熟，2020 年上半年才出货什么的，到时候 IE11 会有多少？这只是第一次迭代，其他重要的里程碑会推迟到更晚，因此 IE11 可能不值得努力。

Answer 2

我同意你的观点，但谁知道他们可能会在主要版本中包含此功能。目前 Blazor.wasm 是预览版。现在你可以在你的 index.html 中有一个像这样的简单解决方案：

<script>
  var ua = window.navigator.userAgent;
  var isIE = /MSIE|Trident/.test(ua);

  if ( isIE ) {
    alert("Internet Explorer browser is not supported. Please use a more modern browser like Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, etc.");
  }
</script>

希望对您有所帮助:) P.S。如果你不想使用脚本，我想这也可以通过 CSS 来完成。

Answer 3

我前段时间偶然发现了一个博客 post（忘记了来源，没有对这项工作表示赞赏），这是这个确切问题的解决方案 - 检测是否支持 Webassembly，如果不支持, 重定向到 'Browser Not Supported' html 页面。它的工作原理与您在上面概述的完全一样。

这是要在 WASM 服务工作者注册之前添加的 JavaScript 片段，例如 navigator.serviceWorker.register('service-worker.js');:

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) {
        console.error('Failed to verify if webassembly is supported, assuming no.');
    }
    return false;
})();

// Modern browsers e.g. Edge/Chrome/Safari/Firefox/etc.
if (webassemblySupported) {
    Blazor.start({});
}
// Older browsers e.g. IE11
else {
    window.location = window.location + "NotSupported.html";
}

Blazor webassembly 应用程序和检测浏览器功能

Blazor webassembly applications and detecting browser capabilities

webassembly

blazor

blazor-client-side