如何检测浏览器是否支持react-redux应用and/or加载失败？

Question

几个月前我加入了一个 developing/maintaining 的小团队，这是一个基于 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 的移动版本加载到我的 phone 上。

无法确切知道是什么原因导致旧版浏览器失败 and/or 哪些浏览器和哪些版本是问题，并了解如何使用 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')
    );

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

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

无论如何，希望提供一个后备消息来显示很容易添加，并且至少应该减轻一些用户的负担 frustration/confusion。

Answer 1

Babel 有 integrated support for Browser compatibility compilation. For example, you can add this in a .browserlistrc 个文件：

> 0.25%
not dead

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

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

如何检测浏览器是否支持react-redux应用and/or加载失败？

How do I detect if a browser supports a react-redux application and/or fails to load?

javascript

cross-browser

react-redux