Эта страница переведена с помощью Cloud Translation API.

Не спите с помощью API Screen Wake Lock

Pete LePage

Thomas Steiner

Опубликовано: 18 декабря 2018 г.

Browser Support

Source

Что такое API блокировки экрана (Screen Wake Lock)?

Чтобы избежать разрядки батареи, большинство устройств быстро переходят в спящий режим, когда остаются бездействующими. Хотя в большинстве случаев это нормально, некоторым приложениям необходимо, чтобы экран оставался активным для выполнения своей работы. Примерами могут служить кулинарные приложения, отображающие этапы рецепта, или игра, такая как Ball Puzzle , которая использует API управления движением устройства для ввода данных.

API Screen Wake Lock предоставляет способ предотвратить затемнение и блокировку экрана устройства. Эта возможность открывает новые возможности, которые до сих пор требовали создания приложений, специфичных для конкретной платформы.

API Screen Wake Lock снижает необходимость в неоптимальных и потенциально энергозатратных обходных путях. Он устраняет недостатки старого API, который ограничивался поддержанием экрана включённым и имел ряд проблем с безопасностью и конфиденциальностью.

Предлагаемые варианты использования API блокировки экрана при пробуждении

Веб-приложение RioRun , разработанное газетой The Guardian , было идеальным примером его применения (хотя сейчас оно уже недоступно). Приложение предлагало виртуальную аудиоэкскурсию по Рио, следуя маршруту марафона Олимпийских игр 2016 года. Без функции блокировки экрана во время воспроизведения экскурсии экраны пользователей часто выключались, что затрудняло использование приложения.

Конечно, существует множество других вариантов применения:

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

Используйте API блокировки экрана (Screen Wake Lock).

API Screen Wake Lock предоставляет только один тип блокировки пробуждения: screen .

блокировка включения `screen`

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

Получите блокировку экрана при пробуждении

Для запроса блокировки экрана необходимо вызвать метод navigator.wakeLock.request() , который возвращает объект WakeLockSentinel . При желании можно передать тип объекта, screen , в качестве параметра. Браузер может отклонить запрос по различным причинам (например, из-за слишком низкого уровня заряда батареи), поэтому рекомендуется обернуть вызов в блок try...catch . В случае сбоя сообщение об исключении будет содержать более подробную информацию.

Снять блокировку включения экрана

Также необходим способ снять блокировку экрана, что достигается вызовом метода release() объекта WakeLockSentinel . Если вы не сохраните ссылку на WakeLockSentinel , снять блокировку вручную будет невозможно, но она будет снята, как только текущая вкладка станет невидимой.

Если вы хотите, чтобы блокировка экрана автоматически снималась по истечении определенного периода времени, вы можете использовать window.setTimeout() для вызова release() , как показано в примере.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Объект WakeLockSentinel имеет свойство released , которое указывает, был ли уже освобожден сторожевой блок. Его значение изначально равно false и меняется на true после отправки события "release" . Это свойство помогает веб-разработчикам узнать, когда блокировка была освобождена, без необходимости ручного отслеживания.

Жизненный цикл блокировки включения экрана

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

Чтобы повторно получить блокировку экрана при пробуждении, отслеживайте событие visibilitychange и запрашивайте новую блокировку экрана при его возникновении:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Сведите к минимуму воздействие на системные ресурсы.

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

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

Если ваше приложение выполняет длительные загрузки, рассмотрите возможность использования фоновой загрузки .
Если ваше приложение синхронизирует данные с внешнего сервера, рассмотрите возможность использования фоновой синхронизации .

Демо

Ознакомьтесь с демонстрацией и исходным кодом функции Screen Wake Lock . Обратите внимание, как блокировка экрана автоматически снимается при переключении вкладок или приложений.

Блокировка включения экрана в диспетчере задач ОС

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

Обратная связь

Вы обнаружили ошибку в реализации Chrome? Или реализация отличается от спецификации?

Сообщите об ошибке . Укажите как можно больше подробностей. Предоставьте четкие инструкции по воспроизведению ошибки и установите для параметра Components значение Blink>WakeLock .

Ресурсы

Благодарности

Видеоролик о диспетчере задач предоставлен Генри Лимом .