Blog. Just Blog

Предотвращение выключения экрана мобильного устройства

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Предотвращение выключения экрана мобильного устройства
Предотвращение выключения экрана мобильного устройства

На одном из сайтов с рецептами я увидел интересную галочку "не выключать экран". Это действительно удобно, когда сайт открыт на планшете или телефоне и в процессе приготовления надо держать рецепт постоянно перед глазами. Ведь вполне возможна ситуация, когда руки испачканы в муке или просто заняты какой-нибудь посудой, а экран гаснет в самый неподходящий момент. Естественно, мне стало интересно, как реализована такая блокировка.

В результате выяснилось, что это возможно благодаря Screen Wake Lock API. С помощью методов этого API ваше веб-приложение может заблокировать автоматическое выключение экрана мобильного устройства. Поддержка этого API современными браузерами достаточно надежна, но фактическая доступность проверяется наличием объекта wakeLock в navigator. Сперва приведу код, который блокирует и разблокирует выключение экрана, а затем прокомментирую некоторые моменты.
  1. <script type="text/javascript">
  2. var lock=null;
  3.  
  4. // Заблокировать экран
  5. async function w_lock() {
  6.     if (!lock) {
  7.         // Создать объект блокировки
  8.         lock await navigator.wakeLock.request('screen');
  9.         if (lock) {
  10.             // Обработчик события release
  11.             lock.addEventListener('release',
  12.                 function() {
  13.                     lock=null;
  14.                 }
  15.             );
  16.  
  17.             // Глобальный обработчик переключения вкладки
  18.             document.addEventListener('visibilitychange',
  19.                 async function() {
  20.                     if (lock && document.visibilityState=='visible') {
  21.                         // Пересоздать объект блокировки
  22.                         lock await navigator.wakeLock.request('screen');
  23.                     }
  24.                 }
  25.             );
  26.         }
  27.     }
  28. }
  29.  
  30. // Разблокировать экран
  31. function w_unlock() {
  32.     if (lock) {
  33.         try {
  34.             lock.release();
  35.         }
  36.         catch(e) {}
  37.         lock=null;
  38.     }
  39. }
  40. </script>
Как видите, тут две функции. Одна включает блокировку, а вторая выключает. Их можно вызывать по нажатию какой-нибудь кнопки или при установке чекбокса, а также при иных условиях. Единственная просьба, если будете использовать этот код, чтобы все действия выполнялись строго по инициативе пользователя, а не бесконтрольно по желанию веб-мастера.

Теперь об упомянутых особенностях. Функция блокировки вызывается асинхронно, объект-наблюдатель блокировки, соответственно, создается с оператором await. На страницу добавляется функция-наблюдатель на событие изменения видимости, которая отслеживает переключение на другую вкладку браузера. Дело в том, что при уходе с блокирующей страницы, блокировка выключения экрана незамедлительно отключается. Теоретически блокировка может отключаться и при других событиях, для этого к созданному промису добавляется функция-наблюдатель на событие release. Текущее состояние блокировки можно отследить по значению свойства released объекта блокировки.

Готовый пример страницы, блокирующей выключение экрана мобильного устройства, можно посмотреть здесь.

Поделиться ссылкой ВКонтакте
Просмотров: 338 | Комментариев: 0

Метки: JavaScript

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2025
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0025 сек.) / Память: 4.5 Mb
Наверх