Question

我是Blazor / WebAssembly的新手，并且热爱这项技术，但不了解某些实现细节的原因。

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

Loading...

永远。

原因很明显，但是Microsoft为什么要以这种方式实现呢？尝试检测浏览器是否支持WebAssembly，如果不支持，是否会更好，更富信息性-将用户重定向到说明原因的另一个静态页面（例如，显示“您的浏览器不支持WebAssembly，请使用Chrome v。XX或更高版本，Edge v。XX或更高版本，等等” ）？

Answer 1

我不是Microsoft员工，但我认为，出于以下原因，他们像这样实施它。

a）MS是使开发人员能够使用的工具和技术的提供商。因此，他们不会为开发人员制定决策。他们通常不创建“ opionated”框架。而显示带有“不支持”的消息是他们的明确意见。他们所有的客户都没有该信息。如果有人愿意在IE11上进行该工作并阻止了他们该怎么办？

b）做到这一点需要零的努力。这本身就是好处。如果他们心中有防弹解决方案，那么我可以毫无疑问地实现他们想要的支持。现在，由于不受支持，开发人员有责任为最终用户提供适当的UX。由开发人员决定如何处理IE。在消息中提供不支持IE11的声明，添加https://github.com/Daddoon/Blazor.Polyfill之类的填充以某种程度上支持IE11，或切换到其他技术。如果MS提供显示消息的解决方案，则它需要其他想要使用polyfill的开发人员，或者切换到其他技术来主动禁用此类检查，并且它需要实施更多的活动部件，仅用于未支持的平台。根本没有道理。

c）对IE11的支持需求正在下降，并且投资支持该市场可能对他们而言并不值得。使用WebAssembly的技术还不够成熟，它们只能在2020年上半年发布什么产品，那么到那时IE11将会有多少？而且这只是第一次迭代，其他重要的里程碑甚至推后了，因此IE11可能不值得努力。

Answer 2

不久前我偶然发现了一篇关于此的博客文章（忘记了来源，不承认这项工作），这是这个确切问题的解决方案 - 检测是否支持 Webassembly，如果不支持，则重定向到“浏览器”不支持'html 页面。它完全按照您上面概述的方式工作。

这是要在之前 WASM Service Worker 注册（例如，navigator.serviceWorker.register('service-worker.js');）添加的 JavaScript 片段：

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";
}

Answer 3

我同意您的观点，但谁知道也许他们将在主版本中包含此功能。目前，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>

希望它会有所帮助:) 附言如果您不想使用脚本，我想也可以通过CSS来完成。

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

3 个答案: