如何检测浏览器是否支持 react-redux 应用程序和/或无法加载？

Question

几个月前，我加入了一个开发/维护基于 react-redux 的网站的小团队；我的一位同事告诉我，一些用户正在使用旧版本的 Internet Explorer，并且在这些情况下网站无法加载。我很确定这是因为我们正在使用 ES 6 等提供的许多现代便利，但我不知道具体是什么导致了这个问题；因此，如果不为旧浏览器提供适当的支持（https://facebook.github.io/create-react-app/docs/supported-browsers-features 并使用 polyfill），如果浏览器在不重构使用现代功能的 JavaScript 片段的情况下无法加载任何内容，是否有办法显示替代内容？

我正在使用 Windows 10 的非常现代的工作站上进行开发，我使用三种主要浏览器快速测试了该网站：Chrome、Firefox 和 Edge。据我所知，这台计算机上的所有浏览器都是最新的，而且该网站甚至可以使用移动版 Chrome 加载到我的手机上。

如果不知道究竟是什么导致旧浏览器失败和/或哪些浏览器和哪些版本存在问题，也没有了解如何使用 polyfill 或其他技术来为这些旧浏览器提供支持，我有什么可以做的吗？同时快速执行，以便碰巧使用旧浏览器的用户通过显示错误消息知道为什么该网站无法运行？

幸运的是，网站的根目录很整洁：

    import React from 'react';
    import { render } from 'react-dom';
    import configureStore from './configureStore';
    import Root from './components/Root';

    const store = configureStore();

    render(
      <Root store={store} />,
      document.getElementById('root')
    );

就是这样，这是最顶层的组件。如何为无法加载网站的浏览器显示替代内容？我们将在网站上列出支持的浏览器列表，但如果用户甚至无法加载页面，他们甚至都不知道出了什么问题；现在一条简单的消息就足够了。

支持旧浏览器也不错，但我不知道现代浏览器功能是什么问题以及如何添加/实现对它们的支持；作为一个很好的奖金问题，这样做涉及什么？也就是说，通过准确确定导致哪个浏览器功能集出现问题的原因来添加对旧浏览器的支持。我正在处理其他事情，这个问题目前的优先级较低，但如果不需要太多工作，那么我会非常乐意实现跨浏览器支持的东西，我现在不知道怎么做我不知道从哪里开始。

在任何情况下，希望提供一个备用消息来显示很容易添加，并且至少应该减轻一些用户的挫败感/困惑。

Answer 1

Babel 有integrated support for Browser compatibility compilation。例如，您可以将其添加到 .browserlistrc 文件中：

> 0.25%
not dead

并且生成的编译代码将与 99.75% 的活动浏览器兼容。基于此，您可以构建一个可以在这些浏览器上正常运行的 React 应用程序。然后由您决定兼容性与性能的权衡。

此外，您可以构建两个 React 应用程序，一个用于性能，一个用于兼容性。使用navigator API，您可以检测浏览器是否与您的高性能 React 应用兼容，并选择要服务的应用。