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

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

Пит ЛеПейдж
Томас Штайнер

Что такое API блокировки пробуждения экрана?

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

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

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

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

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

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

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

Текущее состояние

Шаг Положение дел
1. Создайте объяснитель Н/Д
2. Создайте первоначальный проект спецификации. Полный
3. Соберите отзывы и повторите дизайн Полный
4. Пробная версия происхождения Полный
5. Запуск Полный

Использование API блокировки пробуждения экрана

Типы блокировки пробуждения

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" . Это свойство помогает веб-разработчикам узнать, когда была снята блокировка, и им не нужно отслеживать это вручную. Он доступен начиная с Chrome 87.

Жизненный цикл блокировки пробуждения экрана

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Минимизируйте воздействие на системные ресурсы

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

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

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

Демо

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

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

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

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

Группа сообщества Web Platform Incubator (WICG) и команда Chrome хотят услышать ваши мысли и опыт использования API Screen Wake Lock.

Расскажите нам о дизайне API

Что-то в API работает не так, как ожидалось? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи?

Сообщить о проблеме с реализацией

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

  • Сообщите об ошибке на https://new.crbug.com . Обязательно укажите как можно больше подробностей, предоставьте простые инструкции по воспроизведению ошибки и установите для параметра «Компоненты» значение Blink>WakeLock . Glitch отлично подходит для быстрого и простого обмена репродукциями.

Показать поддержку API

Планируете ли вы использовать API блокировки пробуждения экрана? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в функциях и показывает другим поставщикам браузеров, насколько важно их поддерживать.

  • Расскажите о том, как вы планируете использовать API, в теме обсуждения WICG .
  • Отправьте твит @ChromiumDev , используя хэштег #WakeLock , и сообщите нам, где и как вы его используете.

Полезные ссылки

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

Изображение героя Кейт Стоун Мэтисон на Unsplash. Видео диспетчера задач любезно предоставлено Генри Лимом .