Добро пожаловать в серию Обязательно знать JavaScript API. В этой серии мы вместе с вами изучим JavaScript API, чтобы мы могли более эффективно использовать его, как старший инженер. Начнем учиться вместе:
Во фронтенд-разработке нам часто нужно контролировать использование ресурсов и улучшать производительность и скорость отклика страницы на основе ее видимости. Page Visibility API в JavaScript позволяет проверить, видна ли страница.
В этой статье будет рассказано, что такое Page Visibility API, как он работает, совместимость и сценарии использования.
🍰 Что такое API видимости страницы?
Page Visibility API – это API браузера, который позволяет определить, видима ли страница. С помощью Page Visibility API мы можем узнать, скрыта ли текущая страница или свернута, поэтому мы можем контролировать поведение страницы и использование ресурсов на основе видимости страницы.
Page Visibility API предоставляет 2 свойства и 1 событие, а именно:
1. Свойства
document.hidden
только для чтения, указывает, скрыта ли текущая страница, возвращает true, если страница скрыта, в противном случае возвращает false.
document.visibilityState
только для чтения, указывает состояние видимости текущей страницы, возможные значения
visible: текущая страница видна, т. е. страница является вкладкой переднего плана не свернутого окна.hidden: текущая страница скрыта, т.е. страница может быть фоновой вкладкой, частью свернутого окна или находиться в состоянии, когда активен экран блокировки ОС.prerender: текущая страница предварительно загружается.unloaded: текущая страница выгружается, некоторые браузеры это не поддерживают.
2. Методы
visibilitychange: инициировать это событие при изменении состояния видимости страницы.
🍭 Где используется Page Visibility API
Page Visibility API можно использовать во многих сценариях, таких как
1️⃣ Видеоплеер
Во время воспроизведения видео вы можете использовать Page Visibility API, чтобы проверить, видна ли страница или нет. Если страница не видна, видео можно поставить на паузу, чтобы сэкономить ресурсы и пропускную способность. Когда страница снова станет видимой, воспроизведение можно возобновить.
2️⃣ Уведомление о сообщениях в реальном времени
Если нашей веб-странице необходимо отправлять уведомления пользователям в режиме реального времени, мы можем использовать Page Visibility API, чтобы определить, видна ли страница или нет, и если страница не видна, уведомление не будет отправлено. Когда пользователь повторно открывает страницу, мы можем проверить еще раз и убедиться, что он видит все непрочитанные сообщения.
3️⃣ Автоматически сохранять данные формы
Если пользователь вводит много данных в форму и покидает страницу во время ее заполнения, мы можем использовать Page Visibility API, чтобы определить, когда нужно покинуть страницу, и автоматически сохранить данные формы для последующего повторного посещения.
4️⃣ Игровые приложения
Если мы разрабатываем веб-игру, мы можем использовать Page Visibility API для приостановки и возобновления игры, чтобы игрок мог выйти из игры, не теряя прогресса.
5️⃣ Анализ веб-статистики
Используйте Page Visibility API для более точного подсчета посещений и лучшего анализа поведения пользователей.
6️⃣ Измерение производительности веб-страницы
Используйте Page Visibility API для измерения времени загрузки и выгрузки страницы, чтобы оптимизировать производительность вашего веб-сайта.
7️⃣ Кэширование страницы
Если пользователь покидает сайт, использующий Page Visibility API, то, записывая состояние кеша, вы можете лучше управлять кешем страниц для более быстрого доступа в следующий раз.
Конечно, есть и другие сценарии использования, поэтому я не буду подробно их описывать в этой статье.
🍬 Как использовать API видимости страницы?
Использование Page Visibility API так же просто, как прослушивание событий visibilitychange в JavaScript. Вот простой пример:
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
// the page is hidden
} else {
// the page is visible
}
})
В приведенном выше примере мы используем событие visibilitychange для прослушивания изменений в состоянии видимости страницы, чтобы мы могли выполнять некоторые действия, когда страница скрыта, и некоторые действия, когда страница снова становится видимой.
🧭 Совместимость API видимости страницы
Page Visibility API поддерживается не всеми браузерами, поэтому нам нужно проверить, поддерживает ли браузер API, прежде чем использовать его:
- Хром: ✅
- Фаерфокс: ✅
- Сафари: ✅
- IE10+: ✅
- Край: ✅
Для получения более подробной информации см. «Page Visibility API».
Если вам необходимо обеспечить совместимость с браузерами, не поддерживающими Page Visibility API, мы можем использовать для этого Polyfill или другие методы обнаружения.
🎁 Пример использования Page Visibility API
Ниже приведены некоторые практические варианты использования Page Visibility API:
1. Управление воспроизведением видео на основе видимости страницы
👉🏻 демо
2. Контролируйте выполнение анимации в зависимости от видимости страницы
Создавайте маленькие шарики на странице, положение которых со временем меняется. Используя Page Visibility API, вы можете остановить анимацию, когда страница не видна, и возобновить ее, когда страница снова станет видимой.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animation Control Using Page Visibility API</title>
<style>
#ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
window.addEventListener("DOMContentLoaded", function () {
var ball = document.getElementById("ball");
ball.style.top = 0;
ball.style.left = 0;
var speedX = 2;
var speedY = 3;
function move() {
var top = parseFloat(ball.style.top);
var left = parseFloat(ball.style.left);
if (top < 0 || top > window.innerHeight - 50) {
speedY = -speedY;
}
if (left < 0 || left > window.innerWidth - 50) {
speedX = -speedX;
}
ball.style.top = top + speedY + "px";
ball.style.left = left + speedX + "px";
}
var timer = setInterval(function () {
move();
}, 10);
document.addEventListener("visibilitychange", function () {
if (document.visibilityState === "hidden") {
clearInterval(timer);
} else {
timer = setInterval(function () {
move();
}, 10);
}
});
});
</script>
</body>
</html>
где setInterval() — функция цикла, которая непрерывно выполняет код функции для достижения эффекта анимации. В этом случае функция move() непрерывно изменяет положение мяча (путем изменения свойств top и left в CSS) и переворачивает его, когда он достигает края экрана. Видимость страницы контролируется событием visibilitychange, которое останавливает анимацию, когда страница переходит из видимой в невидимую, и возобновляет анимацию, когда она переходит в другую сторону.
🍀 Резюме
В этой статье мы узнали о концепциях, использовании, совместимости и практических примерах использования Page Visibility API. В практической разработке мы можем контролировать использование ресурсов на основе видимости страницы, чтобы улучшить взаимодействие с пользователем и оптимизировать производительность. Если вы хотите узнать больше об API видимости страницы, вы можете обратиться к следующим документам:
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
