如何檢測瀏覽器是否支持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 集成了對瀏覽器兼容性編譯的支持 。 例如，您可以將其添加到.browserlistrc文件中：

> 0.25%
not dead

並且生成的編譯代碼將與99.75％的活動瀏覽器兼容。 基於此，您可以構建一個可以在這些瀏覽器上正常運行的React應用。 然后由您決定兼容性與性能的權衡。

另外，您可以構建兩個React應用，一個用於性能，另一個用於兼容性。 使用navigator API ，您可以檢測瀏覽器是否與您的高性能React應用程序兼容，並選擇要提供的應用程序。