Видимость страницы API
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
При переключении между вкладками, web страница переходит в фоновый режим и поэтому не видна пользователю. Page Visibility API предоставляет события, которые вы можете отслеживать, чтобы узнать, когда страница станет видимой или скрытой, а так же возможность наблюдать текущее состояние видимости страницы.
Когда пользователь сворачивает окно или переключается на другую вкладку, API отправляет событие visibilitychange обработчикам. Вы можете отследить это событие и выполнить какие-то действия. Например, если ваше приложение проигрывает видео, его можно поставить на паузу, когда пользователь переключил вкладку (страница ушла в фон), а затем возобновить видео, когда пользователь вернулся на вкладку. Пользователь не теряет место на котором остановил просмотр, звук от видео не конфликтует с аудио новой вкладки, пользователь может комфортно просмотреть оба видео.
Состояния видимости для <iframe> такие же как и для родительской страницы. Скрытие <iframe> используя CSS стили (такие как display: none;) не вызывают события видимости и не изменяют состояние документа, содержащегося во фрейме.
Использование
Давайте рассмотрим несколько способов использования Page Visibility API.
- На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешёл на другую вкладку
- Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер
- Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчёт количества просмотров
- Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)
Раньше у разработчиков были неудобные способы. Например, обработка событий blur и focus на объекте window помогала узнать когда страница становилась не активной, но это не давало возможность понять когда страница действительно скрыта от пользователя. Page Visibility API решает эту проблему.