Как определить, поддерживает ли браузер приложениеact-redux и / или не загружается? - PullRequest
0 голосов
/ 10 января 2019

Я присоединился к небольшой команде, которая разрабатывает / поддерживает веб-сайт на основе реаги-редукса несколько месяцев назад; один из моих коллег сообщил мне, что некоторые пользователи используют старые версии Internet Explorer и что в таких случаях веб-сайт не загружается. Я почти уверен, что это потому, что мы используем многие современные удобства, предлагаемые ES 6 и тому подобное, но я не знаю точно, что является причиной проблемы; соответственно, без предоставления надлежащей поддержки для старых браузеров (https://facebook.github.io/create-react-app/docs/supported-browsers-features и использования polyfill), есть ли способ отобразить альтернативный контент, если браузер не может ничего загрузить без рефакторинга фрагментов JavaScript, использующих современные функции?

Я работаю на очень современной рабочей станции с Windows 10, и я быстро протестировал сайт, используя три основных браузера: Chrome, Firefox и Edge. Насколько мне известно, все браузеры на этом компьютере обновлены, и веб-сайт даже загружается на мой телефон с помощью мобильной версии Chrome.

Не имея роскоши точно знать, что приводит к сбою старых браузеров и / или какие и какие версии являются проблемой, а также узнавать, как использовать полифилл или другие методы для поддержки этих старых браузеров, могу ли я что-то сделать? Делайте это быстро, чтобы пользователи, использующие старые браузеры, знали, почему сайт не работает, отображая сообщение об ошибке?

К счастью, корень сайта хорош и аккуратен:


    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')
    );

И это все, это самый верхний компонент. Как отобразить альтернативный контент для браузеров, которые не могут загрузить сайт? Мы собираемся включить список поддерживаемых браузеров на веб-сайте, но если пользователи не могут даже загрузить страницу, они даже не будут знать, что происходит неправильно; пока достаточно простого сообщения.

Было бы неплохо также поддерживать старые браузеры, но я не знаю, в чем заключается проблема с современными функциями браузера и как добавить / реализовать их поддержку; как приятно иметь бонусный вопрос, что связано с этим? То есть добавление поддержки для старых браузеров путем точного определения того, что вызывает проблему, для какого набора функций браузера. Есть и другие вещи, над которыми я работаю, и этот вопрос на данный момент имеет более низкий приоритет, но если это не займет много времени, я буду более чем рад реализовать кросс-браузерную поддержку, я не знаю, как в данный момент и Я не уверен, с чего начать.

В любом случае, мы надеемся, что достаточно просто добавить резервное сообщение для отображения и, по крайней мере, устранить некоторое разочарование / замешательство пользователя.

1 Ответ

0 голосов
/ 11 января 2019

Babel имеет встроенную поддержку компиляции совместимости браузера . Например, вы можете добавить это в файл .browserlistrc:

> 0.25%
not dead

и скомпилированный код будет совместим с 99,75% живых браузеров. Исходя из этого, вы можете создать приложение React, которое будет корректно работать в этих браузерах. Тогда вам решать, какой компромисс производительности VS совместимости.

Кроме того, вы можете создать два приложения React, одно для производительности и одно для совместимости. Используя API навигатора , вы можете определить, будет ли браузер совместим с вашим работающим приложением React, и выбрать, какое приложение использовать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...