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

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

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

Pete LePage

Thomas Steiner

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

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

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

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

Текущий статус

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

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

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

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

блокировка `screen`

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

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

Получение блокировки экрана

Чтобы запросить блокировку пробуждения экрана, необходимо вызвать метод 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.

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

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

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

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

Демо

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

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

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

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

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

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

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

Отправьте сообщение о проблеме со спецификацией в репозиторий API Screen Wake Lock на GitHub или добавьте свои мысли к существующей проблеме.

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

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

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

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

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

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

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

Рекомендация кандидата на спецификацию | Редакторский проект
Демонстрация функции Screen Wake Lock | Источник демонстрации функции Screen Wake Lock
Ошибка отслеживания
Запись ChromeStatus.com
Эксперименты с API Wake Lock
Компонент Blink: Blink>WakeLock

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

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