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

Предотвращение выключения экрана мобильного устройства
На одном из сайтов с рецептами я увидел интересную галочку "не выключать экран". Это действительно удобно, когда сайт открыт на планшете или телефоне и в процессе приготовления надо держать рецепт постоянно перед глазами. Ведь вполне возможна ситуация, когда руки испачканы в муке или просто заняты какой-нибудь посудой, а экран гаснет в самый неподходящий момент. Естественно, мне стало интересно, как реализована такая блокировка.
В результате выяснилось, что это возможно благодаря Screen Wake Lock API. С помощью методов этого API ваше веб-приложение может заблокировать автоматическое выключение экрана мобильного устройства. Поддержка этого API современными браузерами достаточно надежна, но фактическая доступность проверяется наличием объекта wakeLock в navigator. Сперва приведу код, который блокирует и разблокирует выключение экрана, а затем прокомментирую некоторые моменты.
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- var lock=null;
- // Заблокировать экран
- async function w_lock() {
- if (!lock) {
- // Создать объект блокировки
- lock = await navigator.wakeLock.request('screen');
- if (lock) {
- // Обработчик события release
- lock.addEventListener('release',
- function() {
- lock=null;
- }
- );
- // Глобальный обработчик переключения вкладки
- document.addEventListener('visibilitychange',
- async function() {
- if (lock && document.visibilityState=='visible') {
- // Пересоздать объект блокировки
- lock = await navigator.wakeLock.request('screen');
- }
- }
- );
- }
- }
- }
- // Разблокировать экран
- function w_unlock() {
- if (lock) {
- try {
- lock.release();
- }
- catch(e) {}
- lock=null;
- }
- }
- </script>
Теперь об упомянутых особенностях. Функция блокировки вызывается асинхронно, объект-наблюдатель блокировки, соответственно, создается с оператором await. На страницу добавляется функция-наблюдатель на событие изменения видимости, которая отслеживает переключение на другую вкладку браузера. Дело в том, что при уходе с блокирующей страницы, блокировка выключения экрана незамедлительно отключается. Теоретически блокировка может отключаться и при других событиях, для этого к созданному промису добавляется функция-наблюдатель на событие release. Текущее состояние блокировки можно отследить по значению свойства released объекта блокировки.
Готовый пример страницы, блокирующей выключение экрана мобильного устройства, можно посмотреть здесь.
Просмотров: 338 | Комментариев: 0
Метки: JavaScript

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

Добавить комментарий
Заполните форму для добавления комментария
