Веб-API с React

Использование Page Visibility API с React

Интернет может больше, чем вы думаете

Интернет — это мощная платформа, которая может предложить больше, чем вы могли ожидать. Существует множество API-интерфейсов, которые расширяют возможности людей в Интернете, позволяя разработчикам создавать веб-сайты, которые реагируют весело и интересно.

Page Visibility API прост в использовании, но его часто упускают из виду. Это полезный инструмент, который можно использовать для экономии заряда батареи, сохранения данных или определения вовлеченности пользователя. Давайте посмотрим, что делает API и почему вы можете захотеть использовать его в своем проекте.

Что это?

Обнаружение, когда вкладка браузера становится активной/неактивной.

Вот и все. Просто и понятно: при использовании браузера с несколькими вкладками API определяет, активна ли вкладка или нет. Когда пользователь переключает вкладки, Page Visibility API запускает событие JavaScript, которое мы можем прослушивать. Когда они возвращаются, мы получаем другое событие, чтобы сообщить нам, что вкладка снова активна.

Трудно представить, потом посмотрите на демо;

Почему это полезно?

Может быть не сразу очевидно, почему вы можете захотеть, активна ли вкладка или неактивна, но есть несколько распространенных случаев, которые вы должны учитывать.

Экономьте энергию

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

Сохранить данные

У вас есть панель управления, которая отправляет запросы к API каждые несколько секунд, чтобы оставаться в курсе. Почему он должен обновляться, если пользователь не смотрит на него? Вы можете сохранить данные пользователя, опрашивая реже или полностью останавливая опрос, пока вкладка снова не станет активной.

Как мне это использовать?

Был настроен пользовательский хук React, чтобы упростить его использование.

Вспомогательные методы

Было создано несколько вспомогательных методов, чтобы абстрагироваться от различий браузеров. Обработчик событий и свойство документа различаются в зависимости от браузера, поэтому getBrowserVisibilityProp и getBrowserDocumentHiddenProp используются, чтобы убедиться, что мы добавляем правильный слушатель и проверяем правильный реквизит.

Сам крючок

Хук довольно простой, мы слушаем событие изменения видимости и сохраняем результат в состоянии перед его возвратом. Обратите внимание, что возвращаемое значение хука useEffect очищает прослушиватель.

Использование крючка

После того, как крючок настроен, его легко использовать.

const isVisible = usePageVisibility();

Ваш компонент может использовать состояние видимости всякий раз, когда оно изменяется, то же самое происходит и с переменной isVisible. Используйте его, чтобы приостановить анимацию, видео и карусели или приостановить выборку, пока вкладка снова не станет активной. Есть много возможностей, так почему бы не попробовать.

Ресурсы:

Ознакомьтесь со статьей в Блоге Benevolent Bytes, чтобы лучше ознакомиться с кодом.