Screen Wake Lock API: Ekraani une vältimine veebirakendustes

Screen Wake Lock API on veebipõhine API, mis võimaldab veebirakendustel takistada seadmete ekraani tuhmumist või lukustumist. See on eriti kasulik rakenduste jaoks, kus pidev ekraani nähtavus on oluline, näiteks meediamängijad, navigeerimisrakendused ja rakendused, mis nõuavad kasutajaga suhtlemist pikema aja jooksul.

Miks on Screen Wake Lock oluline?

Tänapäeva maailmas ootavad kasutajad sujuvaid kogemusi. Seade, mis automaatselt ekraani tuhmistab või lukustab, võib neid kogemusi häirida, eriti kui kasutajad on aktiivselt veebirakendusega seotud. Mõelge nendele stsenaariumidele:

• Video taasesitus: Kujutage ette, et vaatate filmi või järgite toiduvalmistamise õpetust ja ekraan tuhmub pidevalt, sundides teid selle elus hoidmiseks ekraani puudutama. See on masendav kogemus.
• Navigatsioonirakendused: Sõidu ajal navigatsioonirakendust kasutades peab ekraan jääma sisselülitatuks, et pakkuda pidevaid juhiseid. Tuhmuv või lukustatud ekraan võib viia valepööreteni ja potentsiaalsete ohtudeni.
• Esitlusrakendused: Slaidide esitamine või olulise teabe kuvamine nõuab, et ekraan jääks kogu esitluse vältel aktiivseks.
• Mängurakendused: Paljud mängud vajavad mängimiseks katkematut ekraani nähtavust. Ekraani uni võib mängukogemust häirida.
• Veebipõhised tahvlid: Veebipõhisel tahvlil koostööd tehes peab ekraan jääma ärkvel, et kasutajad ei peaks uuesti aktiveerimiseks korduvalt puudutama.

Screen Wake Lock API pakub nendele probleemidele lahenduse, võimaldades veebirakendustel kontrollida ekraani sisse/välja lülitamise olekut ja pakkuda sujuvamat ja kasutajasõbralikumat kogemust.

Brauseri tugi

2024. aasta lõpu seisuga on Screen Wake Lock API-l tugev tugi enamikes suuremates brauserites. Siiski on alati oluline kontrollida uusimat brauserite ühilduvuse teavet ressurssidest nagu Mozilla Developer Network (MDN) ja Can I use, et tagada optimaalne brauseriteülene ühilduvus. Brauseri tugi võib varieeruda sõltuvalt brauseri versioonist ja operatsioonisüsteemist.

Screen Wake Lock API kasutamine

Screen Wake Lock API kasutamine on suhteliselt lihtne. Siin on ülevaade peamistest sammudest:

1. Kontrollige API tuge

Enne API kasutamist on oluline kontrollida, kas kasutaja brauser seda toetab. See hoiab ära vead brauserites, mis seda API-d ei rakenda.

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

            

              
                Copy
              
            
          

2. Taotlege ärkveloleku lukku

Ärkveloleku luku taotlemiseks kasutage meetodit navigator.wakeLock.request(). See meetod tagastab Promise'i, mis laheneb edukal taotlusel WakeLockSentinel objektiga. WakeLockSentinel objekt esindab aktiivset ärkveloleku lukku.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Kutsuge see funktsioon välja ärkveloleku luku aktiveerimiseks
requestWakeLock();

            

              
                Copy
              
            
          

Selles näites üritab funktsioon requestWakeLock() hankida ekraani ärkveloleku lukku. Argument 'screen' määrab, et soovime vältida ekraani tuhmumist või lukustumist. Kui taotlus on edukas, logitakse konsooli teade. Kood sisaldab ka veakäsitlejat, et püüda kinni kõik erandid, mis võivad ärkveloleku luku taotlemisel tekkida. Oluline on, et kood lisab sündmusekuulaja, et kuulata sündmust "release", mis annab märku, kui ärkveloleku lukk pole enam aktiivne. See võib juhtuda, kui kasutaja on luku selgesõnaliselt vabastanud või kui süsteem on selle energiasäästu meetmete tõttu tagasi võtnud.

3. Vabastage ärkveloleku lukk

On ülioluline vabastada ärkveloleku lukk, kui seda enam ei vajata. Selle tegemata jätmine võib tühjendada seadme akut ja negatiivselt mõjutada kasutajakogemust. Äratusluku vabastamiseks kutsuge WakeLockSentinel objektil välja meetod release().

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Kutsuge see funktsioon välja ärkveloleku luku vabastamiseks
releaseWakeLock();

            

              
                Copy
              
            
          

See funktsioon vabastab turvaliselt ärkveloleku luku ja seab muutuja wakeLock väärtuseks null. On oluline tagada, et muutujat wakeLock hallatakse õigesti, et vältida vigu luku vabastamisel.

4. Äratusluku vabastamise sündmuste käsitlemine

Süsteem võib ärkveloleku luku vabastada erinevatel põhjustel, näiteks kasutaja tegevusetuse või madala aku tõttu. On oluline kuulata WakeLockSentinel objekti release sündmust, et neid olukordi sujuvalt käsitleda. See võimaldab teil ärkveloleku lukku uuesti taotleda või muid sobivaid toiminguid teha.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Proovige ärkveloleku lukku uuesti taotleda
  // või tehke muid sobivaid toiminguid
  requestWakeLock(); // Näiteks ärkveloleku luku uuesti taotlemine
});

            

              
                Copy
              
            
          

See näide näitab, kuidas kuulata sündmust release ja potentsiaalselt ärkveloleku lukku uuesti taotleda. Tegelik rakendamine sõltub teie rakenduse konkreetsetest nõuetest.

Parimad tavad ja kaalutlused

Kuigi Screen Wake Lock API on võimas tööriist, on oluline seda vastutustundlikult kasutada ja arvestada järgmiste parimate tavadega:

• Taotlege ärkveloleku lukke ainult vajadusel: Vältige ärkveloleku lukkude tarbetut hankimist, kuna need võivad seadme akut tühjendada. Taotlege ärkveloleku lukku ainult siis, kui pidev ekraani nähtavus on kasutajakogemuse jaoks tõeliselt hädavajalik.
• Vabastage ärkveloleku lukud viivitamatult: Vabastage ärkveloleku lukk kohe, kui seda enam ei vajata. See aitab säästa aku energiat ja vältida tarbetut tühjenemist.
• Käsitlege vabastamissündmusi sujuvalt: Olge valmis selleks, et süsteem võib ärkveloleku luku ootamatult vabastada. Kuulake sündmust release ja tehke sobivaid toiminguid, näiteks taotlege ärkveloleku lukku uuesti või teavitage kasutajat.
• Pakkuge kasutajale juhtnuppe: Kaaluge kasutajatele juhtnuppude pakkumist ärkveloleku luku funktsiooni sisse- või väljalülitamiseks. See annab kasutajatele rohkem kontrolli oma seadme energiatarbimise üle ja võimaldab neil rakenduse käitumist kohandada. Näiteks võiks meediamängijal olla lüliti "Hoia ekraan sees".
• Arvestage aku kestvusega: Olge teadlik mõjust aku kestvusele. Ekraani pidev sees hoidmine võib oluliselt vähendada aku kestvust, eriti mobiilseadmetes. Teavitage kasutajaid potentsiaalsest mõjust ja pakkuge võimalusi selle leevendamiseks.
• Kasutaja luba: Kuigi API ise kasutajalt otse luba ei küsi, on hea tava teavitada kasutajat, et rakendus takistab ekraani uinumist, ja lubada neil see käitumine keelata.
• Varumehhanism: Brauserite jaoks, mis API-d ei toeta, kaaluge varumehhanismi rakendamist. See võib hõlmata JavaScripti kasutamist, et perioodiliselt saata ekraanile näivaid sündmusi, et vältida selle tuhmumist või lukustumist. Siiski olge teadlik, et see lähenemine võib olla vähem usaldusväärne ja ressursimahukam kui Screen Wake Lock API kasutamine.
• Testimine: Testige oma rakendust põhjalikult erinevates seadmetes ja brauserites, et tagada Screen Wake Lock API ootuspärane toimimine. Pöörake tähelepanu aku tarbimisele ja kasutajakogemusele.
• Juurdepääsetavus: Olge teadlik, et ekraani alati sees hoidmine võib mõnele kasutajale problemaatiline olla. Ekraani ärkveloleku luku keelamise võimaluste pakkumine muudab teie rakenduse juurdepääsetavamaks.

Reaalse maailma näited

Siin on mõned reaalse maailma näited sellest, kuidas Screen Wake Lock API-d saab kasutada erinevates rakendustes:

• Meediamängijad: Videostriimimisrakendus saab kasutada Screen Wake Lock API-d, et vältida ekraani tuhmumist taasesituse ajal, pakkudes sujuvat vaatamiskogemust.
• Navigatsioonirakendused: Navigatsioonirakendus saab kasutada API-d, et hoida ekraani sees, kui kasutaja sõidab, tagades, et juhised on alati nähtavad.
• Esitlusrakendused: Esitlusrakendus saab kasutada API-d, et vältida ekraani tuhmumist esitluse ajal, tagades, et publik näeb alati slaide.
• Spordirakendused: Treeningut jälgiv spordirakendus saab hoida ekraani sees, et kasutajad saaksid kiiresti näitajaid vaadata, ilma et peaksid oma seadet avama.
• Retseptirakendused: Retseptirakendus saab kasutada API-d, et hoida ekraani sees, kui kasutaja järgib retsepti, vältides ekraani tuhmumist toiduvalmistamise ajal.
• Kioskirakendused: Kioskirakendused saavad sellest funktsioonist kasu. Näiteks iseteeninduskioskid lennujaamades või restoranides saavad kasutada Screen Wake Lock API-d, et tagada ekraani aktiivsus ja reageerimine kasutaja interaktsioonidele.
• Telemeditsiini rakendused: Virtuaalsete arstivisiitide ajal, eriti nendel, mis nõuavad jälgimist, saab Screen Wake Lock API-d kasutada tagamaks, et ekraan jääb kogu konsultatsiooni vältel sisselülitatuks.

Koodinäide: Meediamängija Screen Wake Lockiga

See näide demonstreerib, kuidas rakendada Screen Wake Lock API-d lihtsas meediamängija rakenduses.

            
<!DOCTYPE html>
<html>
<head>
  <title>Meediamängija Screen Wake Lockiga</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Teie brauser ei toeta video silti.
  </video>

  <button id="wakeLockBtn">Luba ekraani ärkveloleku lukk</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Keela ekraani ärkveloleku lukk';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Luba ekraani ärkveloleku lukk';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Luba ekraani ärkveloleku lukk';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Valikuline: taotlege ärkveloleku lukku automaatselt, kui video hakkab mängima
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

See kood loob lihtsa meediamängija nupuga, millega saab ekraani ärkveloleku lukku lubada või keelata. Kui nuppu klõpsatakse, taotleb kood kas uut ärkveloleku lukku või vabastab olemasoleva. Nupu tekst uuendatakse vastavalt ärkveloleku luku hetkeseisule. See näide sisaldab ka valikulist sündmusekuulajat, mis taotleb ärkveloleku lukku automaatselt, kui video hakkab mängima. Märkus: Asendage your-video.mp4 oma videofaili tegeliku asukohaga.

Turvakaalutlused

Screen Wake Lock API on loodud turvalisust silmas pidades. Brauserid rakendavad erinevaid turvameetmeid, et vältida API kuritarvitamist. Näiteks võivad brauserid piirata ärkveloleku luku hoidmise kestust või nõuda kasutaja interaktsiooni enne ärkveloleku luku andmist. Järgige alati selles artiklis varem kirjeldatud parimaid tavasid, et tagada API vastutustundlik ja eetiline kasutamine.

Alternatiivid Screen Wake Lock API-le

Enne Screen Wake Lock API-d kasutasid arendajad sageli "häkke", et vältida ekraani uinumist. Need meetodid on üldiselt ebausaldusväärsed ja neid ei soovitata.

• Tühi videoelement: Pisikese, vaikse videoelemendi lisamine lehele ja selle pidev esitamine. See petab süsteemi arvama, et meedia mängib, takistades seega uinumist. See on äärmiselt ressursimahukas.
• Näivad AJAX-päringud: Perioodiliselt AJAX-päringute saatmine serverile, et hoida seade "aktiivsena". See on halb asendus, kuna see on võrgumahukas ja ebausaldusväärne.

Neid meetodeid ei soovitata, kuna need on ebausaldusväärsed ja võivad negatiivselt mõjutada jõudlust ja aku kestvust. Screen Wake Lock API on soovitatav lahendus ekraani uinumise vältimiseks veebirakendustes.

Kokkuvõte

Screen Wake Lock API on väärtuslik tööriist veebiarendajatele, kes soovivad luua sujuvaid ja kaasahaaravaid kasutajakogemusi. Vältides seadmete ekraani tuhmumist või lukustumist, saate tagada, et teie rakendused jäävad nähtavaks ja reageerivaks isegi pikema tegevusetuse perioodide ajal. Pidage meeles, et kasutage API-d vastutustundlikult ja järgige selles artiklis kirjeldatud parimaid tavasid, et vältida seadme aku tühjenemist ja negatiivset mõju kasutajakogemusele. Kuna API laiemalt kasutusele võetakse, saab sellest kahtlemata veebiarenduse tööriistakomplekti oluline osa. Kasutage Screen Wake Lock API võimsust, et oma veebirakendusi täiustada ja pakkuda oma kasutajatele üle maailma meeldivamat kogemust.