Nie usypiaj dzięki interfejsowi Screen Wake Lock API

Interfejs Screen Wake Lock API umożliwia zapobieganie przyciemnianiu lub blokowaniu ekranu przez urządzenia, gdy aplikacja musi nieprzerwanie działać.

Pete LePage
Thomas Steiner

Co to jest Screen Wake Lock API?

Aby uniknąć rozładowania baterii, większość urządzeń szybko przechodzi w tryb uśpienia, gdy nie są używane. W większości przypadków jest to w porządku, ale niektóre aplikacje muszą utrzymywać ekran włączony, aby dokończyć pracę. Przykładem mogą być aplikacje do gotowania, które pokazują kolejne kroki przepisu, lub gry, takie jak Ball Puzzle, które wykorzystują interfejsy API ruchu urządzenia do wprowadzania danych.

Screen Wake Lock API umożliwia zapobieganie przyciemnianiu i blokowaniu ekranu urządzenia. Ta funkcja umożliwia korzystanie z nowych funkcji, które do tej pory wymagały aplikacji na konkretną platformę.

Interfejs Screen Wake Lock API zmniejsza potrzebę stosowania nieeleganckich i potencjalnie energochłonnych obejść. Rozwiązuje on niedociągnięcia starszego interfejsu API, który ograniczał się do utrzymywania włączonego ekranu i miał szereg problemów związanych z bezpieczeństwem i prywatnością.

Sugerowane przypadki użycia interfejsu Screen Wake Lock API

RioRun, aplikacja internetowa opracowana przez The Guardian, była idealnym przykładem zastosowania tej technologii (choć nie jest już dostępna). Aplikacja zabierze Cię na wirtualną wycieczkę audio po Rio, prowadzącą trasą maratonu olimpijskiego z 2016 roku. Bez blokad wybudzania ekrany użytkowników często wyłączałyby się podczas odtwarzania wycieczki, co utrudniałoby korzystanie z niej.

Oczywiście istnieje wiele innych zastosowań:

  • aplikacja z przepisami, która utrzymuje ekran włączony podczas pieczenia ciasta lub gotowania obiadu;
  • aplikacja z kartą pokładową lub biletem, która utrzymuje ekran włączony do momentu zeskanowania kodu kreskowego;
  • aplikacja w stylu kiosku, która utrzymuje ekran włączony przez cały czas;
  • internetowa aplikacja do prezentacji, która utrzymuje ekran włączony podczas prezentacji;

Obecny stan,

Krok Stan
1. Tworzenie wyjaśnienia Nie dotyczy
2. Tworzenie wstępnej wersji specyfikacji Zakończono
3. Zbieranie opinii i ulepszanie projektu Zakończono
4. Wersja próbna origin Zakończone
5. Uruchom Zakończono

Korzystanie z interfejsu Screen Wake Lock API

Rodzaje blokad uśpienia

Interfejs Screen Wake Lock API udostępnia obecnie tylko jeden rodzaj blokady wybudzania: screen.

screen blokada uśpienia

screenBlokada wybudzania zapobiega wyłączeniu ekranu urządzenia, dzięki czemu użytkownik może zobaczyć informacje wyświetlane na ekranie.

Uzyskiwanie blokady uśpienia ekranu

Aby poprosić o blokadę ekranu, musisz wywołać metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Jako parametr przekazujesz do tej metody żądany typ blokady wybudzania. Obecnie jest on ograniczony tylko do 'screen', dlatego jest opcjonalny. Przeglądarka może odrzucić prośbę z różnych powodów (np. z powodu zbyt niskiego poziomu naładowania baterii), dlatego warto umieścić wywołanie w instrukcji try…catch. W przypadku niepowodzenia komunikat wyjątku będzie zawierać więcej szczegółów.

Zwalnianie blokady uśpienia ekranu

Musisz też mieć możliwość zwolnienia blokady ekranu, co można zrobić, wywołując metodę release() obiektu WakeLockSentinel. Jeśli nie przechowujesz odwołania do WakeLockSentinel, nie możesz ręcznie zwolnić blokady, ale zostanie ona zwolniona, gdy bieżąca karta będzie niewidoczna.

Jeśli chcesz automatycznie zwalniać blokadę wybudzania ekranu po upływie określonego czasu, możesz użyć window.setTimeout(), aby wywołać release(), jak pokazano w przykładzie poniżej.

// 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);

Obiekt WakeLockSentinel ma właściwość released, która wskazuje, czy element wartowniczy został już zwolniony. Jego wartość początkowa to false, a po wysłaniu zdarzenia "release" zmienia się na true. Ta właściwość pomaga programistom stron internetowych dowiedzieć się, kiedy blokada została zwolniona, dzięki czemu nie muszą śledzić tego ręcznie. Jest dostępna od Chrome 87.

Cykl życia blokady uśpienia ekranu

Gdy będziesz korzystać z wersji demonstracyjnej blokady aktywności ekranu, zauważysz, że blokady aktywności ekranu są wrażliwe na widoczność strony. Oznacza to, że blokada uśpienia ekranu zostanie automatycznie zwolniona, gdy zminimalizujesz kartę lub okno albo przełączysz się z karty lub okna, w którym jest aktywna blokada uśpienia ekranu.

Aby ponownie uzyskać blokadę uśpienia ekranu, nasłuchuj zdarzenia visibilitychange i gdy wystąpi, poproś o nową blokadę uśpienia ekranu:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimalizowanie wpływu na zasoby systemowe

Czy w aplikacji należy używać blokady wybudzania ekranu? Wybrana metoda zależy od potrzeb aplikacji. Niezależnie od tego, którą wybierzesz, powinna ona być jak najmniej obciążająca, aby zminimalizować wpływ aplikacji na zasoby systemowe.

Zanim dodasz do aplikacji blokadę wybudzania ekranu, zastanów się, czy Twoje przypadki użycia nie mogą zostać rozwiązane za pomocą jednego z tych alternatywnych rozwiązań:

  • Jeśli Twoja aplikacja wykonuje długotrwałe pobieranie, rozważ użycie pobierania w tle.
  • Jeśli aplikacja synchronizuje dane z serwera zewnętrznego, rozważ użycie synchronizacji w tle.

Prezentacja

Zapoznaj się z wersją demonstracyjną Screen Wake Lock i źródłem wersji demonstracyjnej. Zwróć uwagę, że blokada wybudzania ekranu jest automatycznie zwalniana po przełączeniu kart lub aplikacji.

Blokady uśpienia ekranu w Menedżerze zadań systemu operacyjnego

Aby sprawdzić, czy jakaś aplikacja uniemożliwia przejście komputera w stan uśpienia, możesz użyć menedżera zadań systemu operacyjnego. Film poniżej pokazuje Monitor aktywności w systemie macOS, który wskazuje, że Chrome ma aktywną blokadę wybudzania ekranu, która utrzymuje system w stanie aktywności.

Prześlij opinię

Grupa społecznościowa Web Platform Incubator (WICG) i zespół Chrome chcą poznać Twoje opinie i wrażenia związane z interfejsem Screen Wake Lock API.

Opisz projekt interfejsu API

Czy w API jest coś, co nie działa zgodnie z oczekiwaniami? Czy brakuje metod lub właściwości, które są potrzebne do realizacji Twojego pomysłu?

Zgłaszanie problemu z implementacją

Czy w implementacji Chrome występuje błąd? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtworzenia błędu i ustaw Komponenty na Blink>WakeLock.

Wyrażanie poparcia dla interfejsu API

Czy zamierzasz używać interfejsu Screen Wake Lock API? Twoje publiczne wsparcie pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wspieranie.

Przydatne linki

Podziękowania

Baner powitalny: Kate Stone Matheson, Unsplash. Film o menedżerze zadań dzięki uprzejmości Henry'ego Lima.