Frontend Screen Wake Lock: Zapobieganie usypianiu ekranu dla lepszego doświadczenia użytkownika

We współczesnym krajobrazie cyfrowym użytkownicy wchodzą w interakcje z aplikacjami internetowymi i mobilnymi na szerokiej gamie urządzeń i systemów operacyjnych. Krytycznym aspektem zapewnienia pozytywnego doświadczenia użytkownika jest upewnienie się, że ekran urządzenia pozostaje aktywny, gdy jest to konieczne. Screen Wake Lock API oferuje potężne rozwiązanie, pozwalające programistom zapobiec przyciemnianiu lub blokowaniu ekranu urządzenia, poprawiając w ten sposób użyteczność i zaangażowanie użytkowników na całym świecie.

Zrozumienie problemu: Usypianie ekranu i jego wpływ

Wyobraź sobie użytkownika w Tokio w Japonii, oglądającego długi samouczek wideo na swoim tablecie podczas nauki nowej umiejętności. A może lekarz w Sao Paulo w Brazylii przeglądający dokumentację medyczną na urządzeniu mobilnym podczas konsultacji. Jeśli ekran urządzenia przyciemni się lub zablokuje w trakcie sesji, może to zakłócić doświadczenie użytkownika, powodując frustrację i potencjalnie prowadząc do utraty zaangażowania. Problem ten jest szczególnie widoczny w aplikacjach takich jak:

• Odtwarzacze wideo: Ciągłe odtwarzanie wideo wymaga, aby ekran pozostał aktywny.
• Platformy e-learningowe: Utrzymanie widoczności ekranu jest niezbędne podczas lekcji i quizów.
• Aplikacje nawigacyjne: Utrzymywanie włączonego ekranu podczas nawigacji jest kluczowe dla bezpieczeństwa i łatwości użytkowania.
• Aplikacje medyczne: Lekarze i pielęgniarki potrzebują widocznych ekranów podczas przeglądania informacji o pacjentach lub podczas zabiegów.
• Interaktywne gry: Długotrwała gra wymaga, aby ekran pozostał włączony.

Domyślne zachowanie większości urządzeń polega na przyciemnianiu ekranu po pewnym okresie bezczynności w celu oszczędzania baterii. Chociaż jest to często pożądane, staje się przeszkodą w użyteczności w konkretnych aplikacjach. Screen Wake Lock API zapewnia programistom środki do obejścia tego domyślnego zachowania, zapewniając, że ekran pozostanie aktywny, gdy jest to potrzebne.

Wprowadzenie do Screen Wake Lock API

Screen Wake Lock API to internetowy interfejs API, który zapewnia aplikacjom internetowym mechanizm zapobiegania przyciemnianiu lub blokowaniu ekranu urządzenia. Został zaprojektowany jako rozwiązanie uwzględniające prywatność i przyjazne dla użytkownika, pozwalające programistom żądać blokad ekranu tylko wtedy, gdy jest to naprawdę konieczne. API jest zbudowane na zasadzie zgody użytkownika i jest zaimplementowane w większości nowoczesnych przeglądarek, w tym Chrome, Firefox i Edge.

Kluczowe koncepcje

• `navigator.wakeLock`: Ta właściwość zapewnia dostęp do Screen Wake Lock API.
• `request()`: Ta metoda służy do żądania blokady ekranu. Przyjmuje typ blokady jako argument (obecnie obsługiwany jest tylko 'screen').
• `release()`: Ta metoda zwalnia wcześniej uzyskaną blokadę ekranu.
• Typy blokad Wake Lock: API obsługuje różne typy blokad. Obecnie jedynym obsługiwanym typem jest 'screen'. W przyszłości API może potencjalnie obsługiwać inne typy, takie jak blokady procesora lub blokady urządzenia.

Implementacja Screen Wake Lock API

Implementacja Screen Wake Lock API obejmuje kilka prostych kroków. Zbadajmy kluczowe etapy z przykładowym kodem, aby zilustrować proces.

1. Sprawdzanie obsługi API

Przed próbą użycia API, kluczowe jest sprawdzenie, czy przeglądarka użytkownika je obsługuje. Można to osiągnąć, sprawdzając istnienie właściwości `navigator.wakeLock`:

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API is supported
  console.log('Screen Wake Lock API supported!');
} else {
  // Screen Wake Lock API is not supported
  console.log('Screen Wake Lock API not supported.');
}

            

              
                Copy
              
            
          

2. Żądanie blokady ekranu

Sednem implementacji jest żądanie blokady ekranu za pomocą metody `request()`. Ta metoda zwraca Promise, który rozwiązuje się z obiektem `WakeLockSentinel`, jeśli żądanie zakończy się pomyślnie. Obiekt `WakeLockSentinel` dostarcza informacji o blokadzie i pozwala na jej zwolnienie.

Oto jak zażądać blokady ekranu:

            
let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
    // Handle the error, e.g., show an error message to the user.
  }
}

            

              
                Copy
              
            
          

W tym kodzie:

• Definiujemy zmienną `wakeLock` do przechowywania obiektu `WakeLockSentinel`.
• Używamy funkcji `async` `requestWakeLock()` do obsługi asynchronicznej natury API.
• Wywołujemy `navigator.wakeLock.request('screen')`, aby zażądać blokady ekranu.
• Jeśli żądanie zakończy się pomyślnie, logujemy wiadomość do konsoli.
• Dołączamy detektor zdarzeń `release` do obiektu `wakeLock`, aby wykryć, kiedy blokada zostanie zwolniona (np. z powodu zamknięcia karty lub przejścia użytkownika).
• Dołączamy obsługę błędów, aby elegancko zarządzać potencjalnymi awariami, takimi jak problemy z uprawnieniami lub brak obsługi.

3. Zwalnianie blokady ekranu

Niezbędne jest zwolnienie blokady ekranu, gdy nie jest już potrzebna. Można to zrobić za pomocą metody `release()` obiektu `WakeLockSentinel`. Jest to szczególnie ważne, aby oszczędzać baterię i szanować ustawienia urządzenia użytkownika.

Oto jak zwolnić blokadę ekranu:

            
function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

            

              
                Copy
              
            
          

W tym kodzie:

• Sprawdzamy, czy istnieje blokada.
• Wywołujemy `wakeLock.release()`, aby zwolnić blokadę. Metoda `release()` zwraca `Promise`, który rozwiązuje się, gdy blokada zostanie zwolniona.
• Logujemy wiadomość do konsoli, aby wskazać zwolnienie.
• Ustawiamy `wakeLock` na `null`, aby wskazać, że blokada została zwolniona.

Funkcja `releaseWakeLock()` powinna być wywoływana, gdy aplikacja nie wymaga już, aby ekran pozostał włączony. Może to być wywołane przez:

• Użytkownik zamykający kartę lub przechodzący ze strony.
• Aplikacja kończąca zadanie, które wymagało aktywnego ekranu (np. kończące się odtwarzanie wideo).
• Użytkownik wyraźnie żądający zwolnienia blokady (np. za pomocą przycisku).

4. Integracja z logiką aplikacji

Implementacja musi być zintegrowana z konkretną logiką aplikacji. Na przykład, w odtwarzaczu wideo możesz zażądać blokady, gdy wideo zacznie się odtwarzać, i zwolnić ją, gdy wideo zostanie wstrzymane lub zakończone. W platformie e-learningowej możesz zażądać blokady podczas lekcji i zwolnić ją, gdy użytkownik przejdzie do innej sekcji. Czas żądania i zwalniania blokady jest krytyczny dla dobrego doświadczenia użytkownika.

Oto hipotetyczny przykład integracji z odtwarzaczem wideo:

            
const videoElement = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

playButton.addEventListener('click', () => {
  videoElement.play();
  requestWakeLock();
});

pauseButton.addEventListener('click', () => {
  videoElement.pause();
  releaseWakeLock();
});

videoElement.addEventListener('ended', () => {
  releaseWakeLock();
});

            

              
                Copy
              
            
          

W tym przykładzie odtwarzacza wideo:

• Blokada jest żądana, gdy wideo zaczyna się odtwarzać (`playButton.addEventListener`).
• Blokada jest zwalniana, gdy wideo jest wstrzymywane (`pauseButton.addEventListener`).
• Blokada jest również zwalniana, gdy wideo się kończy (`videoElement.addEventListener('ended')`).

Najlepsze praktyki i uwagi

Efektywna implementacja Screen Wake Lock API obejmuje przestrzeganie najlepszych praktyk, aby zapewnić pozytywne i szanujące prywatność doświadczenie użytkownika. Oto kilka kluczowych rozważań:

1. Zgoda użytkownika i przejrzystość

Zawsze bądź przejrzysty dla użytkowników, dlaczego używasz Screen Wake Lock API. Jasno komunikuj powód zapobiegania usypianiu ekranu. Rozważ udostępnienie przełącznika lub ustawienia, które pozwalają użytkownikom kontrolować, czy blokada ekranu jest aktywna. Daje to użytkownikom sprawczość i kontrolę nad zachowaniem ich urządzenia. W jurysdykcjach na całym świecie przestrzeganie zgody użytkownika jest coraz ważniejsze w przepisach dotyczących prywatności danych.

2. Użycie kontekstowe

Żądaj blokady ekranu tylko wtedy, gdy jest to naprawdę konieczne. Unikaj używania jej bezkrytycznie, ponieważ może to negatywnie wpłynąć na żywotność baterii i zirytować użytkowników. Rozważ kontekst aktywności użytkownika. Na przykład, jeśli użytkownik czyta artykuł w aplikacji informacyjnej, blokada ekranu może nie być konieczna, ale jeśli ogląda wideo osadzone w artykule, może to być odpowiednie.

3. Właściwe zwolnienie

Upewnij się, że blokada ekranu jest zawsze zwalniana, gdy nie jest już wymagana. Jest to kluczowe dla oszczędzania baterii i szanowania preferencji użytkownika. Użyj detektorów zdarzeń (np. `visibilitychange`, `beforeunload`, `pagehide`), aby wykryć, kiedy użytkownik przechodzi ze strony lub zamyka kartę, i odpowiednio zwolnij blokadę.

4. Obsługa błędów

Zaimplementuj solidną obsługę błędów, aby elegancko zarządzać potencjalnymi problemami, takimi jak błędy uprawnień lub niezgodności przeglądarek. Poinformuj użytkownika, jeśli żądanie blokady ekranu nie powiedzie się, i w razie potrzeby udostępnij alternatywne opcje. Udostępnianie pomocnych komunikatów o błędach w różnych językach przyniosłoby korzyści globalnej publiczności.

5. Zużycie baterii

Pamiętaj o zużyciu baterii. Chociaż Screen Wake Lock API jest zaprojektowany tak, aby był energooszczędny, utrzymywanie włączonego ekranu w sposób ciągły nieuchronnie szybciej wyczerpie baterię niż umożliwienie urządzeniu przejścia w tryb uśpienia. Zaprojektuj swoją aplikację tak, aby była wydajna na inne sposoby, takie jak optymalizacja odtwarzania wideo i zmniejszenie zużycia procesora, aby zminimalizować ogólny wpływ na żywotność baterii.

6. Uwzględnienie dostępności

Weź pod uwagę użytkowników z niepełnosprawnościami. Upewnij się, że Twoja implementacja jest dostępna dla użytkowników o różnych potrzebach. Na przykład, udostępnij alternatywne sposoby kontrolowania blokady ekranu, jeśli mają trudności z używaniem standardowych elementów sterujących. Przetestuj swoją aplikację z czytnikami ekranu i innymi technologiami wspomagającymi, aby zapewnić kompatybilność. Przestrzeganie wytycznych Web Content Accessibility Guidelines (WCAG) jest niezbędne dla globalnej użyteczności.

7. Testowanie na różnych urządzeniach i przeglądarkach

Przetestuj swoją implementację na różnych urządzeniach i przeglądarkach, aby zapewnić kompatybilność i spójne zachowanie. Różne urządzenia i przeglądarki mogą mieć różne strategie zarządzania energią i zachowanie ekranu. Testowanie międzyprzeglądarkowe jest kluczowe dla dotarcia do globalnej publiczności. Najlepsze podejście obejmuje testowanie na różnych platformach i systemach operacyjnych, w tym Android, iOS, Windows, macOS i Linux.

8. Wykrywanie funkcji

Zawsze używaj wykrywania funkcji, aby sprawdzić dostępność Screen Wake Lock API przed próbą jego użycia. Zapewnia to, że Twoja aplikacja elegancko się degraduje i nie ulega awarii, jeśli API nie jest obsługiwane przez przeglądarkę użytkownika.

Przykłady z życia wzięte i globalne zastosowania

Screen Wake Lock API ma liczne zastosowania w różnych branżach i przypadkach użycia. Oto kilka przykładów ilustrujących jego praktyczne znaczenie:

• Opieka zdrowotna: Pracownicy służby zdrowia w szpitalach i klinikach w różnych krajach, takich jak Indie i Nigeria, mogą używać tego API, aby systemy monitorowania pacjentów lub interfejsy urządzeń medycznych były widoczne podczas zabiegów.
• Edukacja: Platformy edukacji online, takie jak te używane przez studentów w Kanadzie lub Australii, mogą zapewnić, że ekran pozostanie aktywny podczas interaktywnych lekcji, quizów i wykładów wideo.
• Produkcja: Pracownicy fabryk w Niemczech lub Japonii mogą używać tego API, aby panele monitorowania produkcji były widoczne na tabletach lub innych urządzeniach, zapobiegając zakłóceniom w produkcji.
• Transport: Kierowcy ciężarówek w Stanach Zjednoczonych lub personel dostawczy w Brazylii mogą utrzymywać aktywne aplikacje nawigacyjne na swoich urządzeniach.
• Fitness: Użytkownicy we Francji lub Korei Południowej mogą używać tego API do monitorowania aktywności fizycznej podczas treningów.
• Kioski interaktywne: Kioski interaktywne w przestrzeniach publicznych w krajach takich jak Wielka Brytania lub Chiny utrzymają aktywne ekrany, aby angażować użytkowników.

Zalety i wady

Zalety

• Poprawione doświadczenie użytkownika: Zapewnia płynne doświadczenie, zapobiegając przyciemnianiu lub blokowaniu ekranu.
• Ulepszona użyteczność: Sprawia, że aplikacje są bardziej użyteczne w sytuacjach, w których ekran musi pozostać aktywny.
• Kompatybilność między platformami: Działa w różnych przeglądarkach i urządzeniach.
• Skoncentrowane na prywatności: Zaprojektowane z myślą o prywatności użytkownika i wymaga zgody użytkownika.

Wady

• Zużycie baterii: Utrzymywanie włączonego ekranu może szybciej wyczerpać baterię.
• Irytacja użytkownika: Może zirytować użytkowników, jeśli jest używane nieodpowiednio lub bez przejrzystości.
• Obsługa przeglądarki: Wymaga obsługi przeglądarki (chociaż jest szeroko dostępna w nowoczesnych przeglądarkach).
• Potencjalne problemy z uprawnieniami: Może podlegać żądaniom uprawnień na niektórych platformach.

Alternatywy i uwagi

Chociaż Screen Wake Lock API zapewnia bezpośrednie rozwiązanie, istnieją alternatywne podejścia i uwagi, które programiści mogą zbadać.

1. `setInterval()` i okresowe aktualizacje

Przed wprowadzeniem Screen Wake Lock API niektórzy programiści używali `setInterval()`, aby okresowo aktualizować zawartość lub wysyłać sygnał do serwera, zapobiegając przejściu urządzenia w tryb uśpienia. Jednak to podejście może być mniej niezawodne i bardziej zasobochłonne. Może być również postrzegane jako obejście, a nie dobrze zdefiniowane rozwiązanie.

2. `requestFullscreen()` i wciągające doświadczenia

W przypadku aplikacji, które obejmują tryb pełnoekranowy, API `requestFullscreen()` może pośrednio zapobiegać usypianiu ekranu na niektórych urządzeniach. Jednak nie jest to gwarantowane zachowanie i może się różnić w zależności od urządzenia i przeglądarki. Koncentruje się przede wszystkim na wyświetlaniu pełnoekranowym, a nie na zarządzaniu zachowaniem uśpienia ekranu.

3. Ustawienia poziomu systemu operacyjnego

Użytkownicy mogą zazwyczaj dostosowywać ustawienia limitu czasu ekranu swojego urządzenia w systemie operacyjnym (np. Windows, macOS, Android, iOS). Programiści powinni poinformować użytkowników, że zachowanie uśpienia ekranu jest zarządzane przez ustawienia urządzenia. Programiści powinni idealnie korzystać z API i pozwolić użytkownikowi zdecydować, czy włączyć/wyłączyć blokadę ekranu, udostępniając przełącznik lub ustawienie.

4. API zarządzania energią (Kierunki przyszłe)

Screen Wake Lock API wciąż ewoluuje. Przyszłe ulepszenia mogą obejmować bardziej szczegółową kontrolę nad zachowaniem ekranu, taką jak możliwość kontrolowania jasności lub poziomu przyciemniania. API mogłoby integrować się z innymi API zarządzania energią, takimi jak API, które mogłyby monitorować i reagować na stan energii urządzenia, aby tworzyć lepiej zoptymalizowane doświadczenia użytkownika.

Dostępność i internacjonalizacja

Dla globalnej publiczności zapewnienie dostępności i internacjonalizacji (i18n) jest najważniejsze. Sam Screen Wake Lock API nie wpływa bezpośrednio na dostępność ani internacjonalizację. Jednak sposób integracji tego API w aplikacji ma bezpośredni wpływ.

Uwagi dotyczące dostępności

• Nawigacja za pomocą klawiatury: Upewnij się, że wszystkie elementy sterujące (np. przyciski, pola wyboru) są dostępne za pomocą klawiatury.
• Czytniki ekranu: Sprawdź, czy technologie wspomagające, takie jak czytniki ekranu, dostarczają dokładnych informacji o bieżącym stanie aplikacji. Zdarzenie `release` powinno być ogłaszane przez czytnik ekranu.
• Kontrast kolorów: Postępuj zgodnie z wytycznymi WCAG, aby zapewnić wystarczający kontrast między tekstem a tłem dla lepszej czytelności.
• Tekst alternatywny: Użyj odpowiedniego tekstu alternatywnego dla wszystkich obrazów i grafik.
• Właściwe atrybuty ARIA: Użyj atrybutów ARIA (np. `aria-label`, `aria-describedby`), aby dostarczyć dodatkowe informacje technologiom wspomagającym.

Uwagi dotyczące internacjonalizacji

• Tłumaczenie: Przetłumacz cały tekst i elementy interfejsu użytkownika na języki obsługiwane przez Twoją aplikację. Użyj solidnej biblioteki tłumaczeń i upewnij się, że kodowanie znaków jest poprawne (UTF-8).
• Formatowanie daty i godziny: Formatuj daty i godziny zgodnie z ustawieniami regionalnymi użytkownika. Użyj bibliotek takich jak `Intl` do formatowania daty/godziny.
• Formatowanie liczb: Formatuj liczby, w tym walutę, zgodnie z ustawieniami regionalnymi użytkownika.
• Obsługa od prawej do lewej (RTL): Jeśli obsługujesz języki pisane od prawej do lewej (np. arabski, hebrajski), upewnij się, że układ Twojej aplikacji jest prawidłowo dostosowany.
• Formatowanie waluty: Obsługuj symbole walut i formatowanie odpowiednio do regionu użytkownika.

Podsumowanie: Poprawa doświadczenia użytkownika na całym świecie

Screen Wake Lock API oferuje cenne narzędzie dla programistów frontendowych, którzy chcą poprawić doświadczenia użytkowników w różnych aplikacjach internetowych i środowiskach mobilnych. Rozumiejąc możliwości API, przestrzegając najlepszych praktyk i przemyślanie integrując je z Twoimi projektami, możesz tworzyć bardziej angażujące, przyjazne dla użytkownika i globalnie dostępne aplikacje.

Proaktywnie zajmując się zachowaniem uśpienia ekranu, możesz zapobiec zakłóceniom i poprawić ogólne doświadczenie użytkownika, niezależnie od tego, czy Twoi użytkownicy są w Londynie, Pekinie czy Lagos. Pamiętaj, aby zawsze priorytetowo traktować zgodę użytkownika, zapewniać przejrzystość i niezwłocznie zwalniać blokadę ekranu, gdy nie jest już potrzebna, aby zapewnić pełne szacunku i odpowiedzialne podejście.

Wraz z ciągłą ewolucją technologii internetowych Screen Wake Lock API prawdopodobnie stanie się jeszcze bardziej krytyczne dla budowania nowoczesnych aplikacji internetowych, które mogą zapewniać płynne, angażujące i globalnie dostępne doświadczenia dla użytkowników na całym świecie. Wykorzystaj moc tego API i buduj lepsze doświadczenia internetowe dla swoich użytkowników na całym świecie!