Blijf wakker met de Screen Wake Lock API

De Screen Wake Lock API biedt een manier om te voorkomen dat apparaten het scherm dimmen of vergrendelen wanneer een applicatie actief moet blijven.

Piet LePage
Thomas Steiner

Wat is de Screen Wake Lock-API?

Om te voorkomen dat de batterij leegraakt, gaan de meeste apparaten snel in de slaapstand als ze niet worden gebruikt. Hoewel dit meestal prima is, moeten sommige applicaties het scherm wakker houden om hun werk te voltooien. Voorbeelden hiervan zijn kookapps die de stappen van een recept laten zien of een spel als 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 behoefte aan hacky en mogelijk energievretende oplossingen. Het verhelpt de tekortkomingen van een oudere API die beperkt was tot het simpelweg aanhouden 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 langer beschikbaar is). De app neemt je mee op een virtuele audiotour door Rio, waarbij je het parcours van de Olympische marathon van 2016 volgt. Zonder wake locks zouden de schermen van gebruikers regelmatig worden uitgeschakeld terwijl de tour werd afgespeeld, waardoor het moeilijk te gebruiken was.

Natuurlijk zijn er nog tal van andere gebruiksscenario's:

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

Huidige status

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

Met behulp van de Screen Wake Lock-API

Wake-lock-typen

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

screen wakelock

Een screen voorkomt dat het scherm van het apparaat wordt uitgeschakeld, zodat de gebruiker de informatie kan zien die op het scherm wordt weergegeven.

Een schermwakelock krijgen

Om een ​​schermwakelock aan te vragen, moet u de methode navigator.wakeLock.request() aanroepen die een WakeLockSentinel object retourneert. Je geeft bij deze methode het gewenste wake lock-type door als parameter, die momenteel beperkt is tot alleen 'screen' en dus optioneel is. De browser kan het verzoek om verschillende redenen weigeren (bijvoorbeeld omdat het batterijniveau te laag is), dus het is een goede gewoonte om het gesprek te verpakken in een try…catch verklaring. Het bericht van de uitzondering bevat meer details in geval van een fout.

Een schermwakelock vrijgeven

U hebt ook een manier nodig om de wake lock van het scherm op te heffen, wat wordt bereikt door de release() -methode van het WakeLockSentinel object aan te roepen. Als u geen verwijzing naar de WakeLockSentinel opslaat, is er geen manier om de vergrendeling handmatig op te heffen, maar deze wordt vrijgegeven zodra het huidige tabblad onzichtbaar is.

Als u de wake lock van het scherm automatisch wilt vrijgeven nadat een bepaalde tijd is verstreken, kunt u window.setTimeout() gebruiken om release() aan te roepen, zoals weergegeven in het onderstaande voorbeeld.

// 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 de eigenschap ' released die aangeeft of er al een sentinel is vrijgegeven. De waarde ervan 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. Het is beschikbaar vanaf Chrome 87.

De levenscyclus van het scherm wake lock

Wanneer u met de demo Screen Wake Lock speelt, zult u merken dat Screen Wake Locks gevoelig zijn voor de zichtbaarheid van de pagina . Dit betekent dat de screen wake lock automatisch wordt opgeheven wanneer u een tabblad of venster minimaliseert, of wegschakelt van een tabblad of venster waarin een screen wake lock actief is.

Om de schermwakelock opnieuw te verkrijgen, luistert u naar de visibilitychange en vraagt ​​u een nieuwe schermwakelock aan 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 u een schermwakelock in uw app gebruiken? Welke aanpak u kiest, hangt af van de behoeften van uw app. Hoe dan ook, u moet de meest lichtgewicht aanpak voor uw app gebruiken om de impact op systeembronnen te minimaliseren.

Voordat u een screen wake lock aan uw app toevoegt, moet u overwegen of uw gebruiksscenario kan worden opgelost met een van de volgende alternatieve oplossingen:

  • Als uw app langdurige downloads uitvoert, kunt u overwegen achtergrondfetch te gebruiken.
  • Als uw app gegevens van een externe server synchroniseert, kunt u overwegen achtergrondsynchronisatie te gebruiken.

Demo

Bekijk de Screen Wake Lock-demo en demobron . Merk op hoe de schermwakelock automatisch wordt opgeheven wanneer u tussen tabbladen of apps schakelt.

Scherm Wake Locks in OS-taakbeheer

U kunt de taakbeheerder van uw besturingssysteem gebruiken om te zien of een toepassing verhindert dat uw computer in de slaapstand gaat. De onderstaande video toont de macOS Activity Monitor , die aangeeft dat Chrome een actieve schermwakelock heeft die het systeem wakker houdt.

Feedback

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

Vertel ons over het API-ontwerp

Is er iets aan de API dat niet werkt zoals verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren?

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

  • Dien een bug in op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details vermeldt, geef eenvoudige instructies voor het reproduceren van de bug en stel Componenten in op Blink>WakeLock . Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

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

Handige Links

Dankbetuigingen

Heldenafbeelding door Kate Stone Matheson op Unsplash. Video over taakbeheer met dank aan Henry Lim .