Frontend Screen Wake Lock: Ekraani unerežiimi vältimine parema kasutajakogemuse nimel

Tänapäeva digitaalses maastikus kasutavad kasutajad veebirakendusi ja mobiilikogemusi laias valikus seadmetes ja operatsioonisüsteemides. Positiivse kasutajakogemuse pakkumisel on kriitilise tähtsusega tagada, et seadme ekraan jääks vajadusel aktiivseks. Screen Wake Lock API pakub võimsat lahendust, mis võimaldab arendajatel takistada seadme ekraani tuhmumist või lukustumist, parandades seeläbi kasutatavust ja kaasatust kasutajate jaoks kogu maailmas.

Probleemi mõistmine: ekraani unerežiim ja selle mõju

Kujutage ette kasutajat Tokyos, Jaapanis, kes vaatab oma tahvelarvutil pikka videoõpetust, õppides uut oskust. Või võib-olla arst Sao Paulos, Brasiilias, kes vaatab konsultatsiooni ajal meditsiinilisi andmeid mobiilseadmes. Kui seadme ekraan tuhmub või lukustub sessiooni keskel, võib see katkestada kasutajakogemuse, põhjustada pettumust ja potentsiaalselt kaasa tuua kaasatuse kaotuse. See probleem on eriti märgatav rakendustes, näiteks:

• Videopleierid: Pidev video taasesitus nõuab ekraani aktiivsena hoidmist.
• E-õppe platvormid: Ekraani nähtavuse säilitamine on oluline õppetundide ja viktoriinide ajal.
• Navigeerimisrakendused: Ekraani aktiivsena hoidmine navigeerimise ajal on ohutuse ja kasutusmugavuse jaoks hädavajalik.
• Meditsiinilised rakendused: Arstid ja õed vajavad ekraani nähtavust patsiendiandmete ülevaatamisel või protseduuride ajal.
• Interaktiivsed mängud: Pikk mängimine nõuab ekraani aktiivsena hoidmist.

Enamiku seadmete vaikimisi käitumine hõlmab ekraani tuhmumist pärast teatud aja möödumist tühikäigul, et säästa akut. Kuigi see on sageli soovitav, muutub see teatud rakendustes kasutatavuse takistuseks. Screen Wake Lock API annab arendajatele vahendid selle vaikimisi käitumise ületamiseks, tagades ekraani vajadusel aktiivsena püsimise.

Tutvumine Screen Wake Lock API-ga

Screen Wake Lock API on veebipõhine API, mis pakub veebirakendustele mehhanismi seadme ekraani tuhmumise või lukustumise vältimiseks. See on loodud privaatsust arvestava ja kasutajasõbraliku lahendusena, võimaldades arendajatel taotleda ekraani unerežiimi lukustust vaid siis, kui see on tõesti vajalik. API põhineb kasutaja nõusoleku põhimõttel ja seda on rakendatud enamikus kaasaegsetes brauserites, sealhulgas Chrome, Firefox ja Edge.

Põhimõisted

• `navigator.wakeLock`: See atribuut annab juurdepääsu Screen Wake Lock API-le.
• `request()`: Seda meetodit kasutatakse ekraani unerežiimi lukustuse taotlemiseks. See tagastab Promise'i, mis lahendatakse `WakeLockSentinel` objektiga, kui taotlus õnnestub. `WakeLockSentinel` objekt annab teavet unerežiimi lukustuse kohta ja võimaldab selle vabastada.
• `release()`: Seda meetodit kasutatakse varem omandatud ekraani unerežiimi lukustuse vabastamiseks.
• Unerežiimi lukustuse tüübid: API toetab erinevat tüüpi unerežiimi lukustusi. Praegu on ainus toetatud tüüp 'screen'. Tulevikus võib API potentsiaalselt toetada muid tüüpe, nagu CPU unerežiimi lukustused või seadme unerežiimi lukustused.

Screen Wake Lock API rakendamine

Screen Wake Lock API rakendamine hõlmab mõningaid lihtsaid samme. Vaatame läbi peamised etapid koos näidiskoodiga, et protsessi illustreerida.

1. API toe kontrollimine

Enne API kasutamise proovimist on oluline kontrollida, kas kasutaja brauser seda toetab. Seda saab teha, kontrollides `navigator.wakeLock` atribuudi olemasolu:

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

            

              
                Copy
              
            
          

2. Ekraani unerežiimi lukustuse taotlemine

Rakendamise tuumaks on ekraani unerežiimi lukustuse taotlemine `request()` meetodi abil. See meetod tagastab Promise'i, mis lahendatakse `WakeLockSentinel` objektiga, kui taotlus õnnestub. `WakeLockSentinel` objekt annab teavet unerežiimi lukustuse kohta ja võimaldab selle vabastada.

Siin on, kuidas ekraani unerežiimi lukustust taotleda:

            
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}`);
    // Käsitle viga, nt näita kasutajale veateadet.
  }
}

            

              
                Copy
              
            
          

Selles koodis:

• Määratleme muutuja `wakeLock`, et salvestada `WakeLockSentinel` objekt.
• Kasutame asünkroonset funktsiooni `requestWakeLock()`, et hallata API asünkroonset olemust.
• Kasutame ekraani unerežiimi lukustuse taotlemiseks `navigator.wakeLock.request('screen')`.
• Kui taotlus õnnestub, logime konsooli sõnumi.
• Lisame `wakeLock` objektile sündmuse kuulaja `release`, et tuvastada, millal unerežiimi lukustus vabastatakse (nt vahelehe sulgemise või kasutaja mujale navigeerimise tõttu).
• Sisaldame veakäsitlust potentsiaalsete tõrgete, nagu lubade probleemid või toe puudumine, sujuvaks haldamiseks.

3. Ekraani unerežiimi lukustuse vabastamine

On oluline vabastada ekraani unerežiimi lukustus, kui seda enam ei vajata. Seda saab teha `WakeLockSentinel` objekti `release()` meetodi abil. See on eriti oluline aku säästmiseks ja kasutaja seadmete eelistuste austamiseks.

Siin on, kuidas ekraani unerežiimi lukustust vabastada:

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

            

              
                Copy
              
            
          

Selles koodis:

• Kontrollime, kas unerežiimi lukustus on olemas.
• Lukustuse vabastamiseks kutsume `wakeLock.release()`. `release()` meetod tagastab `Promise`i, mis lahendatakse, kui lukustus on vabastatud.
• Logime vabastamise näitamiseks konsooli sõnumi.
• Määrame `wakeLock` nulliks, et näidata, et lukustus on vabastatud.

Funktsiooni `releaseWakeLock()` tuleks kutsuda, kui rakendus enam ei vaja ekraani aktiivsena hoidmist. Seda võib käivitada:

• Kasutaja sulgeb vahelehe või navigeerib lehelt ära.
• Rakendus lõpetab ülesande, mis nõudis ekraani aktiivsena hoidmist (nt video taasesitus lõppes).
• Kasutaja taotleb väljaselgelt unerežiimi lukustuse vabastamist (nt nupu kaudu).

4. Integreerimine rakenduse loogikaga

Rakendamine tuleb integreerida konkreetse rakenduse loogikaga. Näiteks videopleieris võite taotleda unerežiimi lukustust video taasesituse alustamisel ja vabastada selle video peatamisel või lõppedes. E-õppe platvormil võite taotleda unerežiimi lukustust õppetunni ajal ja vabastada selle, kui kasutaja navigeerib teise jaotisse. Unerežiimi lukustuse taotlemise ja vabastamise ajastus on hea kasutajakogemuse jaoks kriitilise tähtsusega.

Siin on hüpoteetiline näide selle integreerimisest videopleierisse:

            
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
              
            
          

Selles videopleieri näites:

• Unerežiimi lukustus taotletakse video taasesituse alustamisel (`playButton.addEventListener`).
• Unerežiimi lukustus vabastatakse video peatamisel (`pauseButton.addEventListener`).
• Unerežiimi lukustus vabastatakse ka video lõppedes (`videoElement.addEventListener('ended')`).

Parimad tavad ja kaalutlused

Screen Wake Lock API tõhus rakendamine hõlmab parimate tavade järgimist, et tagada positiivne ja privaatsust austav kasutajakogemus. Siin on mõned peamised kaalutlused:

1. Kasutaja nõusolek ja läbipaistvus

Olge kasutajatega alati läbipaistvad, miks te Screen Wake Lock API-t kasutate. Teavitage selgelt ekraani unerežiimi vältimise põhjust. Kaaluge lüliti või sätte pakkumist, mis võimaldab kasutajatel kontrollida, kas ekraani unerežiimi lukustus on aktiivne. See annab kasutajatele nende seadme käitumise üle otsustusõiguse ja kontrolli. Üle maailma erinevates jurisdiktsioonides on kasutaja nõusoleku austamine üha olulisem andmete privaatsuse õigusaktides.

2. Kontekstipõhine kasutamine

Taotlege ekraani unerežiimi lukustust ainult siis, kui see on tõeliselt vajalik. Vältige selle kasutamist halastamatult, kuna see võib aku kasutusaega negatiivselt mõjutada ja kasutajaid ärritada. Kaaluge kasutaja tegevuse konteksti. Näiteks, kui kasutaja loeb uudiste rakenduses artiklit, ei pruugi ekraani unerežiimi lukustus olla vajalik, kuid kui nad vaatavad artiklisse manustatud videot, võib see sobida.

3. Korrektne vabastamine

Veenduge, et ekraani unerežiimi lukustus alati vabastatakse, kui seda enam ei vajata. See on aku säästmiseks ja kasutajate eelistuste austamiseks ülioluline. Kasutage sündmuste kuulajaid (nt `visibilitychange`, `beforeunload`, `pagehide`), et tuvastada, millal kasutaja lehelt ära navigeerib või vahelehe sulgeb, ja vabastage unerežiimi lukustus vastavalt.

4. Veakäsitlus

Rakendage usaldusväärne veakäsitlus, et hallata sujuvalt potentsiaalseid probleeme, nagu lubade vead või brauseri ühildumatused. Teavitage kasutajat, kui ekraani unerežiimi lukustuse taotlus ebaõnnestub, ja pakkuge vajadusel alternatiivseid valikuid. Abistavate veateadete pakkumine erinevates keeltes oleks kasulik globaalsele publikule.

5. Aku tarbimine

Olge teadlikud aku tarbimisest. Kuigi Screen Wake Lock API on loodud energiasäästlikuks, tühjeneb aku ekraani pideva aktiivsena hoidmisel paratamatult kiiremini, kui lasta seadmel magama minna. Projekteerige oma rakendus muul viisil tõhusaks, näiteks optimeerides video taasesitust ja vähendades protsessori kasutamist, et minimeerida üldist mõju aku kestvusele.

6. Ligipääsetavuse kaalutlused

Kaaluge puuetega kasutajaid. Veenduge, et teie rakendus on erinevate vajadustega kasutajatele ligipääsetav. Näiteks pakkuge kasutajatele alternatiivseid viise ekraani unerežiimi lukustuse juhtimiseks, kui neil on raskusi standardsete juhtnuppude kasutamisega. Testige oma rakendust ekraanilugejate ja muude abitehnoloogiatega, et tagada ühilduvus. Veebisisu ligipääsetavuse juhiste (WCAG) järgimine on globaalse kasutatavuse jaoks hädavajalik.

7. Testimine erinevatel seadmetel ja brauseritel

Testige oma rakendust erinevatel seadmetel ja brauseritel, et tagada ühilduvus ja ühtlane käitumine. Erinevatel seadmetel ja brauseritel võivad olla erinevad võimsuse haldamise strateegiad ja ekraani käitumine. Brauseriteülene testimine on ülemaailmse publikuni jõudmiseks ülioluline. Parim lähenemisviis hõlmab testimist erinevatel platvormidel ja operatsioonisüsteemidel, sealhulgas Android, iOS, Windows, macOS ja Linux.

8. Funktsiooni tuvastamine

Kasutage alati funktsiooni tuvastamist, et kontrollida Screen Wake Lock API olemasolu enne selle kasutamise proovimist. See tagab, et teie rakendus degradeerub sujuvalt ega jookse kokku, kui API-t kasutaja brauser ei toeta.

Reaalsed näited ja globaalsed rakendused

Screen Wake Lock API-l on arvukalt rakendusi erinevates tööstusharudes ja kasutusjuhtumites. Siin on mõned näited selle praktilise olulisuse illustreerimiseks:

• Tervishoid: Meditsiinipersonal haiglates ja kliinikutes erinevates riikides, nagu Indias ja Nigeerias, saab seda API-t kasutada patsientide jälgimissüsteemide või meditsiiniseadmete liideste nähtavana hoidmiseks protseduuride ajal.
• Haridus: Veebipõhised õppeplatvormid, mida kasutavad näiteks Kanada või Austraalia üliõpilased, saavad tagada, et ekraan jääb aktiivseks interaktiivsete tundide, viktoriinide ja video loengute ajal.
• Tööstus: Saksa või Jaapani tehase töötajad saavad seda API-t kasutada tootmise jälgimisliideste nähtavana hoidmiseks tahvelarvutites või muudes seadmetes, vältides tootmise katkestusi.
• Transport: Ameerika Ühendriikide veoautojuhid või Brasiilia tarnijad saavad navigeerimisrakendused oma seadmetes aktiivsena hoida.
• Fitness: Prantsusmaal või Lõuna-Koreas asuvad kasutajad saavad seda API-t kasutada treeningujälgimisseadmete jaoks treeningute ajal.
• Interaktiivsed kioskid: Interaktiivsed kioskid avalikes kohtades nagu Ühendkuningriik või Hiina hoiab oma ekraanid aktiivsena, et kasutajaid kaasata.

Eelised ja puudused

Eelised

• Parem kasutajakogemus: Pakub sujuvat kogemust, takistades ekraani tuhmumist või lukustumist.
• Täiustatud kasutatavus: Muudab rakendused kasutatavamaks olukordades, kus ekraan peab aktiivsena püsima.
• Platvormideülene ühilduvus: Töötab erinevates brauserites ja seadmetes.
• Privaatsust silmas pidav: Loodud kasutaja privaatsust silmas pidades ja nõuab kasutaja nõusolekut.

Puudused

• Aku tühjenemine: Ekraani pidevalt aktiivsena hoidmine võib akut kiiremini tühjendada.
• Kasutaja ärritamine: Võib kasutajaid ärritada, kui seda kasutatakse sobimatult või ilma läbipaistvuseta.
• Brauseri tugi: Nõuab brauseri tuge (kuigi kaasaegsetes brauserites laialdaselt saadaval).
• Potentsiaalsed lubade probleemid: Võib mõnedel platvormidel olla lubade taotluste objektiks.

Alternatiivid ja kaalutlused

Kuigi Screen Wake Lock API pakub otsest lahendust, on olemas alternatiivsed lähenemisviisid ja kaalutlused, mida arendajad võivad uurida.

1. `setInterval()` ja perioodilised värskendused

Enne Screen Wake Lock API kasutuselevõttu kasutasid mõned arendajad `setInterval()` sisu perioodiliseks värskendamiseks või signaali saatmiseks serverile, et takistada seadme magama minemist. See lähenemisviis võib siiski olla vähem usaldusväärne ja ressursimahukam. Seda võib ka pidada pigem lahenduseks kui hästi määratletud lahenduseks.

2. `requestFullscreen()` ja immersiivsed kogemused

Täisekraanirežiimi hõlmavate rakenduste puhul võib `requestFullscreen()` API mõnel seadmel kaudselt takistada ekraani magamist. See ei ole siiski garanteeritud käitumine ja võib varieeruda sõltuvalt seadmest ja brauserist. See keskendub peamiselt täisekraanikuvale, mitte ekraani unerežiimi käitumise haldamisele.

3. Operatsioonisüsteemi tasemel sätted

Kasutajad saavad tavaliselt oma seadme ekraani ajalõpu sätted operatsioonisüsteemist (nt Windows, macOS, Android, iOS) kohandada. Arendajad peaksid teavitama kasutajaid, et ekraani unerežiimi käitumist juhitakse seadme sätetega. Arendajad peaksid ideaalis kasutama API-t ja laskma kasutajal otsustada ekraaniluku lubamise/keelamise üle, pakkudes lülitit või sätet.

4. Võimsuse haldamise API-d (tulevased suunad)

Screen Wake Lock API on endiselt arenev. Tulevased täiustused võivad hõlmata ekraani käitumise täpsemat juhtimist, näiteks võimalust juhtida heleduse või tuhmumise taset. API võiks integreerida teiste võimsuse haldamise API-dega, nagu API-d, mis suudavad jälgida seadme energiaseisundit ja sellele reageerida, et luua paremini optimeeritud kasutajakogemusi.

Ligipääsetavus ja rahvusvahelised kasutajad

Globaalse publiku jaoks on ligipääsetavuse ja rahvusvahelise kasutajate kaasamise (i18n) tagamine ülioluline. Screen Wake Lock API ise ei mõjuta otseselt ligipääsetavust ega rahvusvahelist kasutajate kaasamist. Kuid see, kuidas te seda API-t oma rakendusse integreerite, mõjutab otseselt.

Ligipääsetavuse kaalutlused

• Klaviatuuri navigeerimine: Veenduge, et kõigile juhtnuppudele (nt nupud, märkeruudud) oleks klaviatuuriga ligipääsetav.
• Ekraanilugejad: Kontrollige, et abitehnoloogiad, nagu ekraanilugejad, pakuksid täpseid teateid rakenduse praeguse oleku kohta. Ekraanilugeja peaks teavitama `release` sündmusest.
• Värvikontrast: Järgige WCAG juhiseid, et tagada piisav kontrast teksti ja tausta vahel parema loetavuse tagamiseks.
• Alternatiivne tekst: Kasutage kõigi piltide ja graafika jaoks sobivat alternatiivteksti.
• Õiged ARIA atribuudid: Kasutage ARIA atribuute (nt `aria-label`, `aria-describedby`), et pakkuda abitehnoloogiatele täiendavat teavet.

Rahvusvahelised kaalutlused

• Tõlge: Tõlkige kogu tekst ja kasutajaliidese elemendid teie rakendust toetavatesse keeltesse. Kasutage töökindlat tõlkeraamatukogu ja tagage korrektne tähemärgikodeering (UTF-8).
• Kuupäeva ja kellaaja vormindamine: Vormindage kuupäevad ja kellaajad vastavalt kasutaja kohalikule sättumusele. Kasutage kuupäeva/kellaaja vormindamiseks teeke, nagu `Intl`.
• Numbrite vormindamine: Vormindage numbrid, sealhulgas valuuta, vastavalt kasutaja kohalikule sättumusele.
• Paremast-vasakule (RTL) tugi: Kui toetate paremalt-vasakule kirjutatavaid keeli (nt araabia, heebrea), veenduge, et teie rakenduse paigutus on õigesti kohandatud.
• Valuuta vormindamine: Käsitsege valuutasümboleid ja vormindamist vastavalt kasutaja piirkonnale.

Järeldus: kasutajakogemuse parandamine globaalselt

Screen Wake Lock API pakub väärtuslikku tööriista frontend arendajatele, kes soovivad parandada kasutajakogemust mitmesugustes veebirakendustes ja mobiilikeskkondades. API võimaluste mõistmisel, parimate tavade järgimisel ja selle hoolikal oma projektidesse integreerimisel saate luua kaasahaaravamaid, kasutajasõbralikumaid ja globaalselt ligipääsetavamaid rakendusi.

Ekraani unerežiimi käitumisele proaktiivselt lähenedes saate vältida katkestusi ja parandada üldist kasutajakogemust, olenemata sellest, kas teie kasutajad viibivad Londonis, Pekingis või Lagoses. Pidage meeles alati eelistada kasutaja nõusolekut, pakkuda läbipaistvust ja vabastada ekraani unerežiimi lukustus kiiresti, kui seda enam ei vajata, et tagada lugupidav ja vastutustundlik lähenemisviis.

Kuna veebitehnoloogiad arenevad jätkuvalt, muutub Screen Wake Lock API tõenäoliselt veelgi kriitilisemaks kaasaegsete veebirakenduste loomisel, mis suudavad pakkuda sujuvaid, kaasahaaravaid ja globaalselt ligipääsetavaid kogemusi kasutajatele kõikjal. Haarake sellest API-st kinni ja looge paremaid veebikogemusi oma kasutajatele kogu maailmas!