Page Visibility API и активность вкладки браузера

Задумывались ли вы когда-нибудь, как используют неактивные вкладки/окна браузера ресурсы процессора или заряд батареи? С помощью Page Visibility API (API видимости страницы), можно определить, когда пользователь не просматривает веб-сайт и не взаимодействуют с ним, чтобы помочь сэкономить вычислительные ресурсы.

Page Visibility API был представлен в 2011 году и включает несколько свойств, которые были добавлены в объект Document:

  • document.hidden: свойство только для чтения, оно возвращает true, когда вкладка/окно скрыты
  • document.visibilityState: свойство только для чтения, которое возвращает строку, обозначающую состояние вкладки/окна: ‘hidden’ | ‘visible’ | ‘prerender’
  • visibilitychange: событие, которое возникает при изменении видимости вкладки/окна

Один из вариантов использования visibilityState – возможность определять, когда браузер находится в фазе ‘prerender’ (когда веб-сайт всё ещё загружается).

Пример 1. Использование visibilitychange

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

Используем простой HTML5 <video> проигрыватель:

<video id="my-video">
  <source id="mp4" src="cartoon.mp4" type="video/mp4"/>
</video>

Теперь добавим обработчик события visibilitychange для автоматического переключения паузы/воспроизведения видео в зависимости от видимости страницы:

const onVisibilityChange = () => {
  const video = document.getElementById('my-video');
  return document.hidden
    ? video.pause()
    : video.play();
}
document.addEventListener('visibilitychange', onVisibilityChange);

Всё очень просто. Включите воспроизведение видео, затем переключите вкладки или сверните окно браузера:

See this code Page Visibility API on x.xhtml.ru.

Пример 2. Использование visibilitychange

API Page Visibility не только для оптимизации ресурсов батареи или ресурсов процессора (например, оптимизация производительности). Его можно использовать для улучшения UX.

Например, пока пользователь просматривает другую вкладку/окно, можно воспользоваться этим и загрузить оставшуюся часть пакета приложения, используя Webpack’s dynamic import():

let loaded = false;
const onVisibilityChange = () => {
  if (!loaded && document.visibilityState === 'visible') {
    Promise.all([
      import('./lodash'),
      import('./moment'),
      import(/* webpackChunkName: "bundle-[index]"*/ './dist'),
      import(/* webpackPrefetch: 0 */ './images')
    ]).then(() => {
      loaded = true;
    });
  }
};

document.addEventListener('visibilitychange', onVisibilityChange);

Поскольку браузер будет кэшировать эти ресурсы, пользователь получит готовое приложение, как только вернётся к вкладке/окну. Это сводит к минимуму задержки, которые могли возникнуть при навигации по вашему приложению.

Итог

Хороший UX не обязательно означает создание инновационных функций или захватывающую анимацию. Иногда забота о пользователе, даже когда он не использует веб-страницу, может произвести большее впечатление!

Найдите другие способы использования API Page Visibility для создания стратегий для оптимизации/улучшения.

Посетите MDN документацию для Page Visibility API.