Blijf wakker met de Screen Wake Lock API

Met de Screen Wake Lock API kunt u voorkomen dat apparaten het scherm dimmen of vergrendelen wanneer een applicatie actief moet blijven.

Pete LePage
Thomas Steiner

Wat is de Screen Wake Lock API?

Om te voorkomen dat de batterij leegloopt, gaan de meeste apparaten snel in de slaapstand wanneer ze niet worden gebruikt. Hoewel dit meestal prima is, moeten sommige apps het scherm actief houden om hun werk te kunnen voltooien. Voorbeelden hiervan zijn kookapps die de stappen van een recept weergeven, of een spel zoals Ball Puzzle , dat de bewegings-API's van het apparaat gebruikt voor invoer.

De Screen Wake Lock API biedt een manier om te voorkomen dat het apparaat het scherm dimt en vergrendelt. Deze mogelijkheid maakt nieuwe ervaringen mogelijk waarvoor tot nu toe een platformspecifieke app nodig was.

De Screen Wake Lock API vermindert de noodzaak voor hacky en mogelijk energieverslindende oplossingen. Het verhelpt de tekortkomingen van een oudere API die beperkt was tot het simpelweg ingeschakeld houden van het scherm en een aantal beveiligings- en privacyproblemen had.

Voorgestelde gebruiksscenario's voor de Screen Wake Lock API

RioRun , een webapp ontwikkeld door The Guardian , was een perfecte use case (hoewel deze niet meer beschikbaar is). De app neemt je mee op een virtuele audiotour door Rio, langs de route van de Olympische marathon van 2016. Zonder wakelocks vielen de schermen van gebruikers regelmatig uit tijdens het afspelen van de tour, waardoor de app lastig te gebruiken was.

Er zijn uiteraard nog veel meer toepassingsmogelijkheden:

  • Een recepten-app die het scherm aan houdt terwijl je een cake bakt of het avondeten kookt
  • Een instapkaart- of ticket-app die het scherm aan houdt totdat de barcode is gescand
  • Een kiosk-achtige app die het scherm continu aan houdt
  • Een webgebaseerde presentatie-app die het scherm tijdens een presentatie aanhoudt

Huidige status

Stap Status
1. Maak een uitleg N.v.t.
2. Maak een eerste ontwerp van de specificatie Compleet
3. Verzamel feedback en herhaal het ontwerp Compleet
4. Oorsprongsproef Compleet
5. Lancering Compleet

De Screen Wake Lock API gebruiken

Wake lock-typen

De Screen Wake Lock API biedt momenteel slechts één type wake lock: screen .

screen wake lock

Met een screen voorkomt u dat het scherm van het apparaat wordt uitgeschakeld, zodat de gebruiker de informatie op het scherm niet kan zien.

Een schermvergrendeling krijgen

Om een ​​wakelock voor het scherm aan te vragen, moet u de methode navigator.wakeLock.request() aanroepen die een WakeLockSentinel object retourneert. U geeft deze methode het gewenste wakelocktype als parameter mee, wat momenteel beperkt is tot alleen 'screen' en daarom optioneel is. De browser kan het verzoek om verschillende redenen weigeren (bijvoorbeeld omdat de batterij te leeg is), dus het is een goede gewoonte om de aanroep in een try…catch -statement te plaatsen. Het bericht van de uitzondering bevat meer details in geval van een fout.

Een schermvergrendeling opheffen

Je hebt ook een manier nodig om de wakelock van het scherm op te heffen. Dit doe je door de release() methode van het WakeLockSentinel -object aan te roepen. Als je geen verwijzing naar WakeLockSentinel opslaat, kun je de vergrendeling niet handmatig opheffen. Deze wordt wel opgeheven zodra het huidige tabblad onzichtbaar is.

Als u de schermvergrendeling automatisch wilt opheffen nadat een bepaalde tijd is verstreken, kunt u window.setTimeout() gebruiken om release() aan te roepen, zoals in het onderstaande voorbeeld wordt getoond.

// 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);

Het WakeLockSentinel -object heeft een eigenschap genaamd released die aangeeft of een sentinel al is vrijgegeven. De waarde is aanvankelijk false ' en verandert in true zodra een "release" -gebeurtenis wordt verzonden. Deze eigenschap helpt webontwikkelaars te weten wanneer een vergrendeling is vrijgegeven, zodat ze dit niet handmatig hoeven bij te houden. Deze eigenschap is beschikbaar vanaf Chrome 87.

De levenscyclus van de wakelock van het scherm

Wanneer je de demo van de schermvergrendeling gebruikt, zul je merken dat schermvergrendelingen afhankelijk zijn van de zichtbaarheid van de pagina . Dit betekent dat de schermvergrendeling automatisch wordt opgeheven wanneer je een tabblad of venster minimaliseert, of weggaat van een tabblad of venster waar een schermvergrendeling actief is.

Om de wakelock van het scherm opnieuw te verkrijgen, moet u luisteren naar de visibilitychange -gebeurtenis en een nieuwe wakelock van het scherm aanvragen wanneer deze zich voordoet:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimaliseer uw impact op systeembronnen

Moet je een wakelock voor je scherm gebruiken in je app? De aanpak die je kiest, hangt af van de behoeften van je app. Hoe dan ook, je moet de meest lichtgewicht aanpak voor je app gebruiken om de impact op de systeembronnen te minimaliseren.

Voordat u een schermvergrendeling aan uw app toevoegt, moet u overwegen of uw use cases kunnen worden opgelost met een van de volgende alternatieve oplossingen:

Demonstratie

Bekijk de demo en de demobron van Screen Wake Lock . Merk op hoe de Screen Wake Lock automatisch wordt opgeheven wanneer u van tabblad of app wisselt.

Schermvergrendelingen in de taakbeheerder van het besturingssysteem

Je kunt Taakbeheer van je besturingssysteem gebruiken om te zien of een app ervoor zorgt dat je computer niet in de slaapstand kan. De onderstaande video laat zien hoe de macOS Activiteitenweergave aangeeft dat Chrome een actieve wakelock heeft die het systeem wakker houdt.

Feedback

De Web Platform Incubator Community Group (WICG) en het Chrome-team willen graag uw mening en ervaringen horen over de Screen Wake Lock API.

Vertel ons over het API-ontwerp

Werkt er iets in de API niet zoals verwacht? Of ontbreken er methoden of eigenschappen die u nodig hebt om uw idee te implementeren?

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

Toon ondersteuning voor de API

Bent u van plan de Screen Wake Lock API te gebruiken? Uw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Nuttige links

Dankbetuigingen

Hero-afbeelding van Kate Stone Matheson op Unsplash. Taakbeheervideo met dank aan Henry Lim .