Как создать простой React компонент, который отслеживает “Page Visibility State”

При создании веб-приложения вы можете столкнуться с ситуациями, когда нужно отследить текущее состояние видимости. Бывает, что нужно воспроизвести или приостановить эффект анимации или видео, уменьшить интенсивность или отследить поведение пользователя для аналитики. На первый взгляд эта функция кажется довольно простой для реализации, но это не совсем так. Отслеживание активности пользователя — довольно сложный процесс.

Есть Page Visibility API, который отлично работает в большинстве случаев, но не обрабатывает все возможные случаи неактивности вкладки браузера. Page Visibility API отправляет событие visibilitychange, чтобы listeners знали, что состояние видимости страницы изменилось. Он не запускает событие в некоторых случаях, если окно или соответствующая вкладка браузера скрыты из виду. Чтобы обрабатывать некоторые из этих случаев, нам нужно использовать комбинацию событий focus и blur как в document, так и на window.

Итак, из этой статьи вы узнаете, как создать простой React-компонент, который отслеживает Page Visibility State.

Шаги

Загрузить PDF

Для создания React-приложения здесь будет использован Codesandbox(вы также можете использовать create-react-app). Мы создадим небольшое приложение, в котором HTML5-элемент video будет воспроизводиться только в том случае, если вкладка браузера находится в фокусе или активна, иначе он будет приостановлен автоматически. Video используется, чтобы облегчить тестирование функций приложения.

Это будет простой компонент с параметрами Boolean active и String src, содержащий URL-адрес для video. Если active props истинно, video будет воспроизводиться. В противном случае оно будет остановлено.
2
Создайте простой React-класс и элемент video с его исходным кодом, принимающим URL-адрес, переданный с помощью src. Здесь используется новый ref API для присоединения ссылки к DOM-node video. Настроим video на автовоспроизведение, предполагая, что когда мы запустим приложение, страница будет активна.
- Safari не позволяет автоматически воспроизводить элементы мультимедиа без взаимодействия с пользователем. Метод componentDidUpdate очень удобен при обработке эффектов при изменении свойства компонента. Поэтому здесь будет использован этот метод для воспроизведения и приостановки видео на основе текущего значения this.props.active.
3
Создайте функцию утилиты. Различия в префиксах браузера не всегда удобны в использовании определенных API-интерфейсов, и Page Visibility API один из них. Мы создадим простую функцию утилиты, которая будет обрабатывать эти различия и возвращать единый API на основе браузера пользователя. Создайте и экспортируйте эту функцию из pageVisibilityUtils.js в src directory.
- В этой функции будем использовать оператор if-else, чтобы вернуть API-интерфейс, специфичный для браузера. Видно, что мы добавляем префикс ms для Internet Explorer и префикс webkit для Webkit-браузеров. Мы будем хранить нужный API в hidden и visibilityChange переменных и возвращать их из функции в виде простого объекта. Наконец, экспортируем функцию.
4
Перейдите на основной компонент. Мы инкапсулируем всю логику отслеживания видимости страницы в используемом класс-компоненте React, используя шаблон Render Props. Создайте класс-компонент VisibilityManager. Этот компонент будет обрабатывать добавление и удаление всех событий на основе DOM listeners.
5
Начните с импорта ранее созданной вспомогательной функции и ее вызова для получения правильных API-интерфейсов браузера. Затем создайте React-компонент и инициализируйте его состояние с одним единственным полем isVisible установленным в true. Это Boolean поле будет отвечать за состояние видимости страницы.
В componentDidMount добавьте event listener к document для visibilitychange с помощью метода this.handleVisibilityChange в качестве обработчика. Также добавьте event listener для событий focus и blur в document, а также элемента window. На этот раз мы установим this.forceVisibilityTrue и this.forceVisibilityFalse как обработчики для событий focus и blur.
7
Затем создайте метод handleVisibilityChange, который принимает аргумент forceFlag. Аргумент forceFlag будет использоваться для определения того, вызван ли метод из-за события visibilitychange или событий focus и blur. Это происходит потому, что методы forceVisibilityTrue и forceVisibilityFalse ничего не делают, кроме вызова метода handleVisibilityChange с истинным и ложным значением для forceFlag.
8
Внутри метода handleVisibilityChange сначала проверьте, является ли значение аргумента forceFlag логическим (если он вызывается из обработчика события visibilitychange, то переданный аргумент будет объектом SyntheticEvent).
- Если это Boolean, проверьте, истинно оно или ложно. Когда значение истинно, вызываем метод setVisibility с true или вызываем метод с false. Метод setVisibility использует this.setState метод для обновления значения isVisible в состоянии компонента.
- Если forceFlag не Boolean, проверьте значение скрытого атрибута в document и соответствующим образом вызываем метод setVisibility. Это завершает логику отслеживания состояния видимости страницы.
Для этого используйте паттерн Render Props. То есть вместо рендеринга компонента из метода render мы вызываем this.props.children как функцию с this.state.isVisible.
10
Установите React-приложение в DOM в файле index.js. Импортируйте два компонента React VisibilityManager и Video и создайте компонент App, соединив их. Мы передаем функцию как дочерний элемент компонента VisibilityManager, который принимает на вход isVisible и передает его компоненту Video на выходе. Также передаем URL-адрес видео как src для компонента Video. Вот как применяется компонент VisiblityManager на основе Render Props. В конце используем метод ReactDOM.render для рендеринга приложения на DOM-node с идентификатором «root».
Реклама