Frontend Screen Wake Lock: Prevence uspání obrazovky pro lepší uživatelský zážitek

V dnešním digitálním prostředí uživatelé interagují s webovými aplikacemi a mobilními zážitky na široké škále zařízení a operačních systémů. Kritickým aspektem poskytování pozitivní uživatelské zkušenosti je zajištění toho, aby obrazovka zařízení zůstala aktivní, když je to nutné. Screen Wake Lock API nabízí výkonné řešení, které vývojářům umožňuje zabránit ztlumení nebo uzamčení obrazovky zařízení, a tím zlepšit použitelnost a zapojení uživatelů po celém světě.

Pochopení problému: Spánek obrazovky a jeho dopad

Představte si uživatele v Tokiu, Japonsku, který sleduje dlouhý video tutoriál na svém tabletu a učí se novou dovednost. Nebo třeba lékaře v Sao Paulu, Brazílii, který si prohlíží lékařské záznamy na mobilním zařízení během konzultace. Pokud se obrazovka zařízení během relace ztlumí nebo uzamkne, může to narušit uživatelskou zkušenost, způsobit frustraci a potenciálně vést ke ztrátě zapojení. Tento problém je zvláště výrazný v aplikacích, jako jsou:

• Video přehrávače: Plynulé přehrávání videa vyžaduje, aby obrazovka zůstala aktivní.
• E-learningové platformy: Udržování viditelnosti obrazovky je nezbytné během lekcí a kvízů.
• Navigační aplikace: Udržování obrazovky zapnuté během navigace je zásadní pro bezpečnost a snadné použití.
• Lékařské aplikace: Lékaři a sestry potřebují viditelné obrazovky při prohlížení informací o pacientech nebo během zákroků.
• Interaktivní hry: Dlouhodobé hraní her vyžaduje, aby obrazovka zůstala zapnutá.

Výchozí chování většiny zařízení zahrnuje ztlumení obrazovky po určité době nečinnosti, aby se šetřila životnost baterie. I když je to často žádoucí, stává se to překážkou použitelnosti ve specifických aplikacích. Screen Wake Lock API poskytuje vývojářům prostředky k přepsání tohoto výchozího chování a zajišťuje, že obrazovka zůstane aktivní, když je to potřeba.

Představujeme Screen Wake Lock API

Screen Wake Lock API je webové API, které poskytuje mechanismus pro webové aplikace, aby zabránily ztlumení nebo uzamčení obrazovky zařízení. Je navrženo jako řešení, které dbá na soukromí a je uživatelsky přívětivé, a umožňuje vývojářům vyžadovat zámky probuzení obrazovky pouze v případě, že je to skutečně nutné. API je postaveno na principu souhlasu uživatele a je implementováno ve většině moderních prohlížečů, včetně Chrome, Firefox a Edge.

Klíčové koncepty

• `navigator.wakeLock`: Tato vlastnost poskytuje přístup k Screen Wake Lock API.
• `request()`: Tato metoda se používá k vyžádání zámku probuzení obrazovky. Jako argument přijímá typ zámku probuzení (aktuálně je podporován pouze typ 'screen').
• `release()`: Tato metoda uvolní dříve získaný zámek probuzení obrazovky.
• Typy zámků probuzení: API podporuje různé typy zámků probuzení. V současné době je podporován pouze typ 'screen'. V budoucnu by API mohlo potenciálně podporovat i další typy, jako jsou zámky probuzení CPU nebo zámky probuzení zařízení.

Implementace Screen Wake Lock API

Implementace Screen Wake Lock API zahrnuje několik jednoduchých kroků. Pojďme prozkoumat klíčové fáze s ukázkovým kódem, který ilustruje proces.

1. Kontrola podpory API

Před pokusem o použití API je důležité zkontrolovat, zda jej prohlížeč uživatele podporuje. Toho lze dosáhnout kontrolou existence vlastnosti `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. Vyžádání zámku probuzení obrazovky

Jádro implementace zahrnuje vyžádání zámku probuzení obrazovky pomocí metody `request()`. Tato metoda vrací Promise, který se vyřeší s objektem `WakeLockSentinel`, pokud je požadavek úspěšný. Objekt `WakeLockSentinel` poskytuje informace o zámku probuzení a umožňuje jeho uvolnění.

Zde je postup, jak vyžádat zámek probuzení obrazovky:

            
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
              
            
          

V tomto kódu:

• Definujeme proměnnou `wakeLock` pro uložení objektu `WakeLockSentinel`.
• Používáme `async` funkci `requestWakeLock()` pro zpracování asynchronní povahy API.
• Voláme `navigator.wakeLock.request('screen')` k vyžádání zámku probuzení obrazovky.
• Pokud je požadavek úspěšný, zapíšeme zprávu do konzole.
• Připojíme posluchače události `release` k objektu `wakeLock`, abychom detekovali, kdy je zámek probuzení uvolněn (např. z důvodu zavření karty nebo odchodu uživatele).
• Zahrnujeme zpracování chyb pro elegantní správu potenciálních selhání, jako jsou problémy s oprávněními nebo nedostatečná podpora.

3. Uvolnění zámku probuzení obrazovky

Je nezbytné uvolnit zámek probuzení obrazovky, když již není potřeba. To lze provést pomocí metody `release()` objektu `WakeLockSentinel`. To je zvláště důležité pro úsporu životnosti baterie a respektování nastavení zařízení uživatele.

Zde je postup, jak uvolnit zámek probuzení obrazovky:

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

            

              
                Copy
              
            
          

V tomto kódu:

• Zkontrolujeme, zda existuje zámek probuzení.
• Voláme `wakeLock.release()` k uvolnění zámku. Metoda `release()` vrací `Promise`, který se vyřeší, když je zámek uvolněn.
• Zapíšeme zprávu do konzole, která indikuje uvolnění.
• Nastavíme `wakeLock` na `null`, abychom indikovali, že zámek byl uvolněn.

Funkce `releaseWakeLock()` by měla být volána, když aplikace již nevyžaduje, aby obrazovka zůstala zapnutá. To může být spuštěno:

• Uživatel zavře kartu nebo odejde ze stránky.
• Aplikace dokončí úlohu, která vyžadovala aktivní obrazovku (např. přehrávání videa skončí).
• Uživatel výslovně požádá o uvolnění zámku probuzení (např. prostřednictvím tlačítka).

4. Integrace s aplikační logikou

Implementace musí být integrována do specifické aplikační logiky. Například ve video přehrávači můžete vyžádat zámek probuzení, když se video začne přehrávat, a uvolnit jej, když se video pozastaví nebo skončí. V e-learningové platformě můžete vyžádat zámek probuzení během lekce a uvolnit jej, když uživatel přejde do jiné sekce. Načasování vyžádání a uvolnění zámku probuzení je zásadní pro dobrý uživatelský zážitek.

Zde je hypotetický příklad integrace do video přehrávače:

            
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
              
            
          

V tomto příkladu video přehrávače:

• Zámek probuzení je vyžádán, když se video začne přehrávat (`playButton.addEventListener`).
• Zámek probuzení je uvolněn, když je video pozastaveno (`pauseButton.addEventListener`).
• Zámek probuzení je také uvolněn, když video skončí (`videoElement.addEventListener('ended')`).

Doporučené postupy a úvahy

Efektivní implementace Screen Wake Lock API zahrnuje dodržování doporučených postupů, které zajistí pozitivní a soukromí respektující uživatelský zážitek. Zde je několik klíčových úvah:

1. Souhlas uživatele a transparentnost

Vždy buďte transparentní vůči uživatelům ohledně toho, proč používáte Screen Wake Lock API. Jasně sdělte důvod, proč bráníte spánku obrazovky. Zvažte poskytnutí přepínače nebo nastavení, které uživatelům umožní ovládat, zda je zámek probuzení obrazovky aktivní. To dává uživatelům kontrolu nad chováním jejich zařízení. V jurisdikcích po celém světě je respektování souhlasu uživatele stále důležitější v legislativě o ochraně osobních údajů.

2. Kontextové použití

Vyžádejte si zámek probuzení obrazovky pouze tehdy, když je to skutečně nutné. Vyvarujte se jeho bez rozdílu používání, protože to může negativně ovlivnit životnost baterie a obtěžovat uživatele. Zvažte kontext aktivity uživatele. Pokud například uživatel čte článek v aplikaci pro zprávy, zámek probuzení obrazovky nemusí být nutný, ale pokud sleduje video vložené do článku, může být vhodný.

3. Správné uvolnění

Zajistěte, aby byl zámek probuzení obrazovky vždy uvolněn, když již není vyžadován. To je zásadní pro úsporu životnosti baterie a respektování uživatelských preferencí. Používejte posluchače událostí (např. `visibilitychange`, `beforeunload`, `pagehide`) k detekci, kdy uživatel odchází ze stránky nebo zavírá kartu, a uvolněte zámek probuzení odpovídajícím způsobem.

4. Zpracování chyb

Implementujte robustní zpracování chyb pro elegantní správu potenciálních problémů, jako jsou chyby oprávnění nebo nekompatibilita prohlížeče. Informujte uživatele, pokud požadavek na zámek probuzení obrazovky selže, a v případě potřeby poskytněte alternativní možnosti. Poskytování užitečných chybových zpráv v různých jazycích by bylo přínosem pro globální publikum.

5. Spotřeba baterie

Dbejte na spotřebu baterie. I když je Screen Wake Lock API navrženo tak, aby bylo energeticky účinné, udržování obrazovky neustále zapnuté nevyhnutelně vybije baterii rychleji, než když zařízení necháte usnout. Navrhněte svou aplikaci tak, aby byla efektivní i jinými způsoby, jako je optimalizace přehrávání videa a snížení využití CPU, abyste minimalizovali celkový dopad na životnost baterie.

6. Zohlednění přístupnosti

Zvažte uživatele s postižením. Zajistěte, aby byla vaše implementace přístupná uživatelům s různými potřebami. Například poskytněte uživatelům alternativní způsoby ovládání zámku probuzení obrazovky, pokud mají potíže s používáním standardních ovládacích prvků. Otestujte svou aplikaci s čtečkami obrazovky a dalšími asistenčními technologiemi, abyste zajistili kompatibilitu. Dodržování pokynů pro přístupnost webového obsahu (WCAG) je zásadní pro globální použitelnost.

7. Testování na různých zařízeních a prohlížečích

Otestujte svou implementaci na různých zařízeních a prohlížečích, abyste zajistili kompatibilitu a konzistentní chování. Různá zařízení a prohlížeče mohou mít různé strategie správy napájení a chování obrazovky. Testování napříč prohlížeči je zásadní pro oslovení celosvětového publika. Nejlepší přístup zahrnuje testování na různých platformách a operačních systémech, včetně Android, iOS, Windows, macOS a Linux.

8. Detekce funkcí

Vždy používejte detekci funkcí ke kontrole dostupnosti Screen Wake Lock API před pokusem o jeho použití. Tím zajistíte, že se vaše aplikace elegantně zhorší a nezhavaruje, pokud API není podporováno prohlížečem uživatele.

Příklady z reálného světa a globální aplikace

Screen Wake Lock API má četné aplikace v různých průmyslových odvětvích a případech použití. Zde je několik příkladů, které ilustrují jeho praktický význam:

• Zdravotní péče: Zdravotníci v nemocnicích a klinikách v různých zemích, jako je Indie a Nigérie, mohou používat toto API k udržování viditelnosti systémů monitorování pacientů nebo rozhraní lékařských zařízení během zákroků.
• Vzdělávání: Online vzdělávací platformy, jako jsou ty, které používají studenti v Kanadě nebo Austrálii, mohou zajistit, aby obrazovka zůstala aktivní během interaktivních lekcí, kvízů a video přednášek.
• Výroba: Tovární dělníci v Německu nebo Japonsku mohou používat toto API k udržování viditelnosti panelů monitorování výroby na tabletech nebo jiných zařízeních, čímž se zabrání narušení výroby.
• Doprava: Řidiči nákladních vozidel ve Spojených státech nebo doručovatelé v Brazílii mohou udržovat navigační aplikace aktivní na svých zařízeních.
• Fitness: Uživatelé ve Francii nebo Jižní Koreji mohou používat toto API pro fitness trackery během cvičení.
• Interaktivní kiosky: Interaktivní kiosky ve veřejných prostorách v zemích, jako je Spojené království nebo Čína, udrží své obrazovky aktivní, aby zaujaly uživatele.

Výhody a nevýhody

Výhody

• Vylepšená uživatelská zkušenost: Poskytuje bezproblémovou zkušenost tím, že zabraňuje ztlumení nebo uzamčení obrazovky.
• Vylepšená použitelnost: Zvyšuje použitelnost aplikací v situacích, kdy obrazovka musí zůstat aktivní.
• Kompatibilita napříč platformami: Funguje v různých prohlížečích a zařízeních.
• Zaměření na soukromí: Navrženo s ohledem na soukromí uživatelů a vyžaduje souhlas uživatele.

Nevýhody

• Vybíjení baterie: Udržování obrazovky zapnuté může rychleji vybíjet baterii.
• Obtěžování uživatelů: Může obtěžovat uživatele, pokud se používá nevhodně nebo bez transparentnosti.
• Podpora prohlížeče: Vyžaduje podporu prohlížeče (i když je široce dostupná v moderních prohlížečích).
• Potenciální problémy s oprávněními: Může podléhat žádostem o oprávnění na některých platformách.

Alternativy a úvahy

Zatímco Screen Wake Lock API poskytuje přímé řešení, existují alternativní přístupy a úvahy, které by vývojáři mohli prozkoumat.

1. `setInterval()` a pravidelné aktualizace

Před zavedením Screen Wake Lock API někteří vývojáři používali `setInterval()` k pravidelné aktualizaci obsahu nebo odeslání signálu na server, čímž zabránili zařízení vstoupit do režimu spánku. Tento přístup však může být méně spolehlivý a náročnější na zdroje. Může být také vnímán jako řešení, které není dobře definované.

2. `requestFullscreen()` a pohlcující zážitky

U aplikací, které zahrnují režim celé obrazovky, může API `requestFullscreen()` nepřímo zabránit spánku obrazovky na některých zařízeních. Toto však není zaručené chování a může se lišit v závislosti na zařízení a prohlížeči. Primárně se zaměřuje na zobrazení na celé obrazovce spíše než na správu chování spánku obrazovky.

3. Nastavení na úrovni operačního systému

Uživatelé si obvykle mohou upravit nastavení časového limitu obrazovky zařízení v rámci operačního systému (např. Windows, macOS, Android, iOS). Vývojáři by měli uživatele informovat, že chování spánku obrazovky je spravováno nastavením zařízení. Vývojáři by měli ideálně využívat API a nechat uživatele rozhodnout, zda povolit/zakázat zámek obrazovky, a to poskytnutím přepínače nebo nastavení.

4. API pro správu napájení (budoucí směry)

Screen Wake Lock API se stále vyvíjí. Budoucí vylepšení by mohla zahrnovat podrobnější kontrolu nad chováním obrazovky, jako je možnost ovládat jas nebo úroveň ztlumení. API by se mohlo integrovat s dalšími API pro správu napájení, jako jsou API, která by mohla monitorovat a reagovat na energetický stav zařízení, a vytvářet tak lépe optimalizované uživatelské zážitky.

Přístupnost a internacionalizace

Pro globální publikum je zajištění přístupnosti a internacionalizace (i18n) nanejvýš důležité. Samotné Screen Wake Lock API nemá přímý dopad na přístupnost nebo internacionalizaci. Způsob, jakým integrujete toto API do své aplikace, má však přímý dopad.

Zohlednění přístupnosti

• Navigace pomocí klávesnice: Zajistěte, aby byly všechny ovládací prvky (např. tlačítka, zaškrtávací políčka) přístupné pomocí klávesnice.
• Čtečky obrazovky: Ověřte, zda asistenční technologie, jako jsou čtečky obrazovky, poskytují přesné informace o aktuálním stavu aplikace. Událost `release` by měla být čtečkou obrazovky oznámena.
• Barevný kontrast: Dodržujte pokyny WCAG, abyste zajistili dostatečný kontrast mezi textem a pozadím pro lepší čitelnost.
• Alternativní text: Používejte vhodný alternativní text pro všechny obrázky a grafiky.
• Správné atributy ARIA: Používejte atributy ARIA (např. `aria-label`, `aria-describedby`) k poskytnutí dalších informací asistenčním technologiím.

Zohlednění internacionalizace

• Překlad: Převeďte veškerý text a prvky uživatelského rozhraní do jazyků podporovaných vaší aplikací. Použijte robustní překladatelskou knihovnu a zajistěte správné kódování znaků (UTF-8).
• Formátování data a času: Formátujte data a časy podle národního prostředí uživatele. Používejte knihovny jako `Intl` pro formátování data/času.
• Formátování čísel: Formátujte čísla, včetně měny, podle národního prostředí uživatele.
• Podpora zprava doleva (RTL): Pokud podporujete jazyky, které se píší zprava doleva (např. arabština, hebrejština), zajistěte, aby bylo rozvržení vaší aplikace správně upraveno.
• Formátování měny: Zpracovávejte symboly měn a formátování vhodně podle oblasti uživatele.

Závěr: Zlepšení uživatelské zkušenosti globálně

Screen Wake Lock API nabízí cenný nástroj pro vývojáře frontendu, kteří se snaží zlepšit uživatelské zkušenosti v různých webových aplikacích a mobilních prostředích. Pochopením schopností API, dodržováním doporučených postupů a promyšlenou integrací do vašich projektů můžete vytvářet poutavější, uživatelsky přívětivější a globálně přístupné aplikace.

Proaktivním řešením chování spánku obrazovky můžete zabránit narušením a zlepšit celkovou uživatelskou zkušenost, ať už jsou vaši uživatelé v Londýně, Pekingu nebo Lagosu. Nezapomeňte vždy upřednostňovat souhlas uživatele, poskytovat transparentnost a uvolnit zámek probuzení obrazovky okamžitě, když již není potřeba, abyste zajistili respektující a odpovědný přístup.

Jak se webové technologie neustále vyvíjejí, Screen Wake Lock API se pravděpodobně stane ještě důležitějším pro vytváření moderních webových aplikací, které mohou poskytovat bezproblémové, poutavé a globálně přístupné zážitky pro uživatele po celém světě. Využijte sílu tohoto API a vytvářejte lepší webové zážitky pro své uživatele po celém světě!