Nie usypiaj dzięki interfejsowi Screen Wake Lock API

Interfejs Screen Wake Lock API umożliwia zapobieganie przyciemnianiu i blokowaniu ekranu na urządzeniach, 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 tryb uśpienia, gdy jest nieaktywna. W większości przypadków jest to dobre rozwiązanie, ale niektóre aplikacje muszą nie wygaszać ekranu, aby dokończyć pracę. Mogą to być na przykład aplikacje kulinarne, które pokazują kroki przepisu, lub gry takie jak łamigłówka balowa, która do wprowadzania danych używa interfejsów API ruchu urządzenia.

Interfejs Screen Wake Lock API uniemożliwia przyciemnianie i blokowanie ekranu przez urządzenie. Umożliwia ona tworzenie nowych funkcji, które do tej pory wymagały aplikacji na konkretnej platformie.

Interfejs Screen Wake Lock API ogranicza konieczność stosowania intrygujących i potencjalnie wymagających rozwiązań. Eliminuje on wady starszych interfejsów API, które służyły tylko do utrzymywania włączonego ekranu i generowały wiele problemów z bezpieczeństwem i prywatnością.

Sugerowane przypadki użycia interfejsu API Screen Wake Lock API

Idealnym rozwiązaniem była aplikacja internetowa RioRun (opracowana przez The Guardian), która nie jest już dostępna. Aplikacja zabierze Cię w wirtualną wycieczkę audio po Rio, po trasie maratonu olimpijskiego w 2016 roku. Bez blokad uśpienia ekrany użytkowników często wyłączały się podczas odtwarzania wycieczki, co utrudniało korzystanie z nich.

Oczywiście istnieje też wiele innych zastosowań:

  • Aplikacja z przepisami, która nie wyłącza ekranu podczas pieczenia ciasta lub przygotowywania kolacji
  • karta pokładowa lub aplikacja biletowa, która pozostawa włączony ekran, dopóki kod kreskowy nie zostanie zeskanowany.
  • Aplikacja przypominająca kiosk, która nieprzerwanie utrzymuje włączony ekran
  • Internetowa aplikacja do prezentacji, która utrzymuje ekran włączony podczas prezentacji

Obecny stan,

Step Stan
1. Utwórz wyjaśnienie Nie dotyczy
2. Utwórz wstępną wersję roboczą specyfikacji Zakończono
3. Zbieraj opinie i ulepszaj projekt Zakończono
4. Testowanie origin Ukończono
5. Uruchom Zakończono

Korzystanie z interfejsu Screen Wake Lock API

Rodzaje blokad uśpienia

Interfejs Screen Wake Lock API oferuje obecnie tylko jeden typ blokady uśpienia: screen.

Blokada uśpienia screen

Blokada uśpienia screen zapobiega wyłączeniu ekranu urządzenia, dzięki czemu użytkownik widzi informacje wyświetlane na ekranie.

Otrzymywanie blokady wybudzania ekranu

Aby zażądać blokady uśpienia ekranu, musisz wywołać metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Przekazujesz tej metody wymagany typ blokady uśpienia jako parametr. Obecnie jest on ograniczony tylko do 'screen', więc jest opcjonalny. Przeglądarka może odrzucić żądanie z różnych powodów (np. dlatego, że poziom naładowania baterii jest zbyt niski), więc warto umieścić wywołanie instrukcją try…catch. Komunikat dotyczący wyjątku będzie zawierał więcej informacji na wypadek niepowodzenia.

Zwalnianie blokady wybudzania ekranu

Potrzebujesz też sposobu na odblokowanie blokady wybudzania ekranu. Jest to możliwe przez wywołanie metody release() obiektu WakeLockSentinel. Jeśli nie zapiszesz odwołania do WakeLockSentinel, nie możesz ręcznie zwolnić blokady, ale nastąpi to, gdy bieżąca karta stanie się niewidoczna.

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

// 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 zawiera właściwość released, która wskazuje, czy czujnik został już zwolniony. Jego wartość to początkowo false, a po wysłaniu zdarzenia "release" zmienia się na true. Ta usługa pomaga programistom stron internetowych dowiedzieć się, kiedy został zdjęty blokada, dzięki czemu nie muszą śledzić tego ręcznie. Jest ona dostępna od Chrome 87.

Cykl życia blokady uśpienia ekranu

Gdy grasz w prezentację dotyczącą blokady wybudzania ekranu, zauważysz, że blokada wybudzania ekranu uwzględnia widoczność strony. Oznacza to, że blokada uśpienia ekranu będzie wyzwalana automatycznie po zminimalizowaniu karty lub okna albo po przełączeniu się z karty lub okna z aktywną blokadą wybudzania ekranu.

Aby ponownie uzyskać blokadę wybudzania ekranu, posłuchaj zdarzenia visibilitychange i poproś o nową blokadę wybudzania ekranu, gdy się pojawi:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimalizowanie wpływu na zasoby systemowe

Czy warto używać w aplikacji blokady wybudzania ekranu? Sposób, który należy zastosować, zależy od potrzeb aplikacji. Niezależnie od tego warto użyć najprostszego rozwiązania, które pozwoli aplikacji zminimalizować jej wpływ na zasoby systemowe.

Zanim dodasz do swojej aplikacji blokadę uśpienia ekranu, zastanów się, czy w Twoich przypadkach nie da się zastosować jednego z tych alternatywnych rozwiązań:

  • Jeśli pobieranie Twojej aplikacji trwa długo, rozważ użycie pobierania w tle.
  • Jeśli Twoja aplikacja synchronizuje dane z serwera zewnętrznego, rozważ użycie synchronizacji w tle.

Pokaz

Zapoznaj się z prezentacją funkcji Blokada wybudzania ekranu i źródłem demonstracyjnym. Zwróć uwagę, że blokada wybudzania ekranu jest wyzwalana automatycznie, gdy przełączasz karty lub aplikacje.

Blokady wybudzania ekranu w menedżerze zadań systemu operacyjnego

Przy użyciu menedżera zadań systemu operacyjnego możesz sprawdzić, czy aplikacja nie blokuje komputera w trybie uśpienia. Film poniżej przedstawia Monitor aktywności w systemie macOS, który wskazuje, że Chrome ma aktywną blokadę wybudzania ekranu, która utrzymuje system w trybie uśpienia.

Prześlij opinię

Grupa społecznościowa inkubatora platform internetowych (WICG) i zespół Chrome chcą poznać Twoje opinie i doświadczenia związane z interfejsem Screen Wake Lock API.

Opowiedz nam o projekcie interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do realizacji swojego pomysłu?

Zgłoś problem z implementacją

Czy wystąpił błąd związany z implementacją przeglądarki Chrome? A może implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, podaj proste instrukcje odtworzenia błędu i ustaw wartość Komponenty na Blink>WakeLock. Glitch to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy zamierzasz użyć interfejsu Screen Wake Lock API? Publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki

Podziękowania

Baner powitalny, którego autorem jest Kate Stone Matheson w Unsplash. Film z menedżerem zadań – Henry Lim.