如何检测浏览器是否支持react redux应用程序和/或加载失败



几个月前,我加入了一个开发/维护基于react redux的网站的小团队;我的一位同事告诉我,一些用户正在使用旧版本的InternetExplorer,在这种情况下,网站无法加载。我很确定这是因为我们使用了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')
);

就这样,这是最上面的组件。对于无法加载网站的浏览器,我将如何显示替代内容?我们将在网站上列出一份受支持的浏览器列表,但如果用户甚至无法加载页面,他们甚至不知道出了什么问题;一条简单的信息就足够了。

支持旧浏览器也很好,但我不知道现代浏览器的功能是什么,以及如何添加/实现对它们的支持;作为一个很好的奖金问题,这样做涉及到什么?也就是说,通过确定究竟是什么原因导致了哪些浏览器的功能集问题,来添加对旧浏览器的支持。我还在做其他事情,这个问题目前优先级较低,但如果不需要太多工作,我会非常乐意实现跨浏览器支持,我现在不知道如何实现,也不知道从哪里开始。

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

Babel集成了对浏览器兼容性编译的支持。例如,您可以将其添加到.browserlistrc文件中:

> 0.25%
not dead

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

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

最新更新