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

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

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

Что такое API блокировки экрана?

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

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

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

Предлагаемые варианты использования API Screen Wake Lock

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

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

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

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

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

Демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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