Nie usypiaj dzięki interfejsowi Screen Wake Lock API

Interfejs API blokady uśpienia ekranu umożliwia zapobieganie przyciemnianiu ani blokowaniu ekranu przez urządzenia, gdy aplikacja musi nieprzerwanie działać.

Pete LePage
Thomas Steiner

Czym jest interfejs Screen Wake Lock API?

Aby uniknąć rozładowywania baterii, większość urządzeń szybko przechodzi w stan uśpienia, gdy nie są używane. W większości przypadków nie ma to znaczenia, ale niektóre aplikacje muszą mieć włączony ekran, aby działać prawidłowo. Mogą to być na przykład aplikacje kulinarne, które pokazują czynności związane z przepisem, oraz gry takie jak Puzzle z piłką, które do wprowadzania danych wykorzystują interfejsy API ruchu urządzenia.

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

Interfejs API blokady uśpienia ekranu eliminuje potrzebę stosowania wątpliwych i potencjalnie energochłonnych obejść. Eliminujemy wady starszego interfejsu API, które ograniczało się tylko do jedynie wyświetlania ekranu i miały liczne problemy związane 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 (chociaż nie jest już dostępna). Aplikacja zabiera Cię na wirtualną wycieczkę po Rio, podczas której pokonasz trasę maratonu olimpijskiego w 2016 r. Bez blokad uśpienia ekrany użytkowników często wyłączałyby się podczas trwania wycieczki, co utrudniało korzystanie z niej.

Oczywiście istnieje wiele innych zastosowań:

  • Aplikacja z przepisami, która utrzymuje ekran włączony podczas pieczenia ciasta lub gotowania obiadu.
  • karta pokładowa lub aplikacja biletowa, która wyświetla się na ekranie do momentu zeskanowania kodu kreskowego.
  • Aplikacja w stylu kiosku, która stale wyświetla treści na ekranie.
  • Internetowa aplikacja do prezentacji, która ma włączony ekran podczas prezentacji.

Obecny stan,

Krok Stan
1. Tworzenie wyjaśnienia Nie dotyczy
2. Utwórz początkową wersję roboczą specyfikacji Zakończono
3. Zbieraj opinie i ulepszaj projekt Zakończono
4. Wersja próbna origin Zakończone
5. Uruchom Zakończono

Korzystanie z interfejsu Screen Wake Lock API

Typy blokad wybudzania

Interfejs API Screen Wake Lock obsługuje obecnie tylko jeden typ blokady ekranu: screen.

screen – blokada uśpienia

Blokada aktywacji screen uniemożliwia wyłączenie ekranu urządzenia, aby użytkownik mógł widzieć wyświetlane informacje.

Uzyskiwanie blokady ekranu

Aby zablokować ekran, musisz wywołać metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Jako parametr tej metody przekazujesz żądany typ blokady aktywacji, który obecnie jest ograniczony do 'screen' i dlatego jest opcjonalny. Przeglądarka może odrzucić żądanie z różnych powodów (np. ponieważ poziom naładowania baterii jest za niski), dlatego dobrze jest owinąć wywołanie w oświadczeniu try…catch. Wiadomość o wyjątku będzie zawierać więcej informacji na wypadek niepowodzenia.

Zwolnienie blokady uśpienia ekranu

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

Jeśli chcesz automatycznie odblokować ekran 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 strażnik został już zwolniony. Jego wartość początkowo wynosi false, a po wysłaniu zdarzenia "release" zmienia się na true. Dzięki tej usłudze programiści stron internetowych wiedzą, że blokada została zdjęta, aby nie musieli robić tego ręcznie. Jest ona dostępna od wersji 87.

Cykl życia blokady uśpienia ekranu

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimalizowanie wpływu na zasoby systemu

Czy w aplikacji należy używać blokady ekranu? Sposób, w jaki to zrobisz, zależy od potrzeb aplikacji. W każdym razie powinieneś zastosować jak najmniejsze możliwe podejście, aby zminimalizować wpływ aplikacji na zasoby systemowe.

Zanim dodasz do aplikacji blokadę uśpienia ekranu, zastanów się, czy Twoje przypadki użycia można rozwiązać przy użyciu jednego z tych alternatywnych rozwiązań:

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

Prezentacja

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

Blokady uśpienia ekranu w menedżerze zadań systemu

Aby sprawdzić, czy aplikacja nie blokuje komputerowi przechodzenia w stan uśpienia, możesz użyć menedżera zadań systemu operacyjnego. Na filmie poniżej widać Monitor aktywności w systemie macOS, który wskazuje, że Chrome ma aktywną blokadę ekranu, która utrzymuje system w stanie czuwania.

Prześlij opinię

Grupa Web Platform Incubator Community Group (WICG) i zespół Chrome chcą poznać Twoje opinie i wrażenia związane z interfejsem API blokady ekranu.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości potrzebnych do wdrożenia pomysłu?

Zgłoś problem z implementacją

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, dołącz proste instrukcje odtwarzania błędu i ustaw wartość Components na Blink>WakeLock. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania reprosów.

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu Screen Wake Lock API? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki

Podziękowania

Baner powitalny autorstwa Kate Stone Matheson z Unsplash. Film o menedżerze zadań udostępnił Henry Lim.