Как с помощью JavaScript не давать экрану перейти в спящий режим

Некоторые новые возможности JavaScript не могут не радовать, и API Wake lock — одна из них. Этот API позволяет нам взаимодействовать с хост-системой. С его помощью разработчик может указать операционной системе, чтобы она не переводила экран в спящий режим!

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

Для предотвращения засыпания или затемнения экрана можно использовать API Wake lock. Запрос разрешения:

let screenLock;

try {
  screenLock = await navigator.wakeLock.request('screen');
} catch (err) {
  console.log('Error with wake lock: ', err);
}

Если запрос успешен, хост не будет переходить в спящий режим до тех пор, пока wake lock (блокировка бодрствующего состояния) не будет снята программным образом. Вот, собственно, и все, что нужно для того, чтобы с помощью JavaScript не давать экрану перейти в спящий режим.

Мы обернули код в try-catch, потому что запрос на блокировку экрана может быть отклонен, если хост-устройство находится в режиме энергосбережения, или у него разряжена батарея, или текущая вкладка не видна.

Снятие блокировки:

await screenLock.release()

Стоит также отметить, что блокировка снимается автоматически, если документ становится неактивным (пользователь переключает вкладки/окна и т. д.). Чтобы справиться с этим, мы можем добавить событие visibilitychange:

document.addEventListener('visibilitychange', async () => {
  try {
    screenLock = await navigator.wakeLock.request('screen');
  } catch (err) {
    console.log('Error with wake lock: ', err);
  }
});

Примечание

Следует иметь в виду пару моментов.

• Этот API доступен только в том случае, если приложение обслуживается по HTTPS.
• Хотя этот API существует уже довольно давно, не все браузеры поддерживают его. Совместимость можно проверить. На момент написания этой статьи Firefox и Safari на iOS не поддерживаются.

Wake lock — отличная функция, с помощью которой можно гарантировать, что устройство не перейдет в спящий режим.

Перевод статьи «How to keep the screen awake using JavaScript».